Promise 简介
Promise 是一个 JavaScript 标准的异步处理对象。它的目标是为异步编程提供一种更优雅、更流畅的解决方案。Promise 可以被理解为一个容器，其中保存着异步操作的状态，状态有三种：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。
在 Promise 中，我们可以通过 then 方法注册处理成功的回调函数，catch 方法注册错误的处理回调函数。
Axios 简介
Axios 是一个非常流行的基于 Promise 的 HTTP 请求库。它可以在浏览器和 Node.js 环境中使用，易用性和可维护性都得到了广泛的认可。
Axios 支持浏览器和 Node.js 环境的异步操作，其中请求可以在 Node.js 中使用 Promise、async 和 await。
Promise 在 Axios 中的应用
我们可以使用 Promise 来处理 Axios 请求。Axios 库已经为我们提供了 Promise 的封装，我们可以通过链式调用 then 方法和 catch 方法来达到异步处理的目的。
让我们来看一个简单的 Axios 请求应用实例：
axios.get('https://api.example.com/data')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});在上面的代码中，我们使用 Axios，然后发起了一个 get 请求。我们可以通过 then 方法处理成功的回调，通过 catch 方法进行错误处理。
在这里，我们用了一个简单的例子来演示 Axios 和 Promise 的使用方法。接下来，我们将详细介绍 Axios 库中的 Promise 应用，以及如何使用 Async Await 来优化这些应用。
Axios 中的 Promise 应用实例
请求多个 URL
在我们的应用中，可能会需要请求多个 URL。这时候，Promise.all 方法可以帮我们解决这个问题。
下面是一个简单的多 URL 请求实例：
-- -------------------- ---- -------
----- ---- - -
---------------------------
---------------------------
--------------------------
--
----- -------- - ------------ -- ----------------
---------------------
-------------- ----------- -
-------------------------- -- ----------------------------
--
--------------- ------- -
-------------------
---在上面的代码中，我们定义一个 urls 数组，然后使用 map 方法根据每个 URL 创建 Axios 请求。使用 Promise.all 方法来处理所有的请求，然后将所有的结果相加并打印到控制台上。
处理 Axios 请求的错误
在 Axios 请求处理中，我们可能会遇到各种错误。针对这些错误，我们可以使用 catch 方法来进行捕捉和处理。
下面是一个 error 处理示例：
axios.get('//invalid-url')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});在上面的代码中，我们手动输入了一个无效的 URL，然后使用 catch 方法捕捉错误。
发送并发请求
在 Axios 中，我们可以发送多个并发请求，使用方法如下：
-- -------------------- ---- -------
-------- ---------------- -
------ ------------------------------------
-
-------- -------------------- -
------ ------------------------------------------------
-
---------------------------- ----------------------
--------------------------- --------- ------------ -
-------------------- -------------
----在上面的代码中，我们定义了两个函数 getUserAccount 和 getUserPermissions，然后使用 axios.all 方法发送这两个请求。通过 axios.spread 方法将两个请求的结果都分配到函数的参数上。
使用 Async Await 优化 Promise
虽然我们可以使用 Promise 来处理异步请求，但是，语法可能会显得有点啰嗦。在 ES2017 中，我们可以使用 Async Await 来进一步简化异步代码的处理。
使用 Async Await 可以在语义上更加接近同步代码的写法。
下面是 Async Await 的使用示例：
const getData = async function () {
try {
const response = await axios.get('//api.example.com/data');
console.log(response.data);
} catch (error) {
console.log(error);
}
};在上面的代码中，我们可以在函数前面加上 async 关键字，然后使用 await 关键字来给 Axios 请求留出处理时间，达到异步调用的效果。
使用 Async Await 不仅能使代码更简洁，更容易理解，还会提高代码的可读性和可维护性，在实际项目中也会发挥更大的效果。
总结
本文我们介绍了 Promise 在 Axios 库中的应用。通过案例演示，我们了解了 Promise 处理并发请求、错误处理和提交请求等方面的使用方法。同时，我们还介绍了 Async Await 的使用及其优化 Promise 的方法。这些技术都是在前端类软件开发中非常重要的一部分，掌握这些技术将使你更成为一名优秀的工程师。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb1ed65ad90b6d041edbb4