异步编程背景
在前端开发中，异步编程是必不可少的。由于 HTTP 协议的限制，浏览器在请求后端接口时，需要等待服务器响应。而在这个等待的过程中，如果不用异步编程，页面便会卡顿，用户体验会大大降低。
为了解决这个问题，JavaScript 引入了异步编程的方式。JavaScript 的异步编程主要是通过回调函数来实现的。在异步请求时，我们需要传入一个回调函数，在接收到服务器响应后，按照一定的规则去调用这个回调函数。
但是，回调函数嵌套过深时，代码可读性差、调试困难，出错率很高。而 ES6 引入了 Promise 来解决这个问题，使得异步编程的代码更加简单易读。
ES8 中的异步 API
在 ES8 中，相较于 ES6，Promise 的性能有了明显的提升。同时，它也提供了一些新的异步 API，包括：
1. async/await
async/await 是让异步代码像同步代码一样易读、易理解。
示例代码：
async function getData() {
const response = await fetch('https://api.github.com/users');
const data = await response.json();
return data;
}上述代码中，我们定义了一个异步函数 getData()，它使用了 await 等待当前异步操作的执行结果。
可见，使用 async/await 接口简化了异步编程的语法，使它更符合我们编写同步代码的思维方式。
2. Promise.allSettled()
Promise.allSettled() 返回一个Promise，该Promise等待传递的所有Promises的状态为settled（即：已完成处理）后，再返回一个包含所有Promise状态的对象数组。
示例代码：
// www.javascriptcn.com code example
const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) =>
setTimeout(() => reject('Error with Timer 1'), 2000)
);
const promise3 = new Promise((resolve, reject) =>
setTimeout(() => reject('Error with Timer 2'), 1000)
);
Promise.allSettled([promise1, promise2, promise3])
.then(console.log)
.catch(console.error);上述代码中，使用 Promise.allSettled() 监听异步的三个 API 请求，并且返回所有异步请求的结果数组。
3. Promise.any()
Promise.any() 返回 Promise，当传递给该函数的 Promise 变为 resolved 状态时，它就会返回该 Promise 的解决值。但是当传递的 Promise 变为 rejected 状态时，它并不会返回任何一个 reject 事件，而是直到 promise 中的所有 Promise 都被 rejected，返回一个 AggregateError，其中包含一个数组，每个对象代表一个 Promise 都被 rejected 的信息。
示例代码：
// www.javascriptcn.com code example
let promise1 = new Promise((resolve, reject) =>
setTimeout(() => reject('Error with Promise 1'), 2000)
);
let promise2 = Promise.resolve(3);
let promise3 = Promise.reject('Error with Promise 3');
Promise.any([promise1, promise2, promise3])
.then(console.log)
.catch(console.error);上述代码中，Promise.any() 接口用于获取三个异步请求最后完成的结果。如果其中一个请求失败，会通过 .catch() 接口捕获异常。
结束语
通过 ES8 提供的就异步 API，在开发过程中，可以尽量避免出现嵌套回调函数的情况。本篇文章共介绍了 async/await、Promise.allSettled() 和 Promise.any() 三种异步 API 的具体使用方法，希望对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d06eaee46428fe9ed736da