异步编程已经成为现代前端开发中不可避免的一部分。而 async 函数则是异步编程的重要工具之一。在 ECMAScript 2017（ES8）中，async 函数被引入标准，提供了一种更加优雅的方式来处理异步代码。而在 ECMAScript 2018（ES9）中，async 函数又有了新的特性和最佳实践。
async 函数的基本用法
async 函数是一个返回 Promise 对象的函数。在函数内部，可以使用 await 关键字来等待 Promise 对象的返回结果。例如：
async function getData() {
const response = await fetch('https://example.com/data');
const data = await response.json();
return data;
}
getData().then(data => console.log(data));在上面的例子中，我们通过 async 函数获取了远程数据，并使用 await 等待数据返回。由于 async 函数返回的是一个 Promise 对象，我们可以使用 then 方法来处理返回的数据。
async 函数的新特性
Promise.allSettled
在 ECMAScript 2018（ES9）中，Promise.allSettled() 方法被引入标准。这个方法接收一个 Promise 数组作为参数，在所有 Promise 对象都完成后返回一个数组。这个数组中的每个元素都包含了对应 Promise 对象的状态和结果。例如：
const promises = [
Promise.resolve('data 1'),
Promise.reject('error 1'),
Promise.resolve('data 2'),
];
Promise.allSettled(promises)
.then(results => console.log(results));在上面的例子中，我们创建了一个包含三个 Promise 对象的数组。其中第二个 Promise 对象会被拒绝。使用 Promise.allSettled() 方法后，我们可以获取到一个包含三个元素的数组，其中第一个元素的状态为 resolved，结果为 'data 1'，第二个元素的状态为 rejected，原因为 'error 1'，第三个元素的状态为 resolved，结果为 'data 2'。
Promise.prototype.finally
在 ECMAScript 2018（ES9）中，Promise.prototype.finally() 方法被引入标准。这个方法接收一个回调函数作为参数，在 Promise 对象无论是被解决还是被拒绝后都会执行这个回调函数。例如：
fetch('https://example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log(error))
.finally(() => console.log('fetch complete'));在上面的例子中，我们使用 fetch 方法获取远程数据。在获取数据成功或失败后，都会执行 finally 方法中的回调函数。
async 函数的最佳实践
1. 避免过度使用 async 函数
虽然 async 函数是处理异步代码的好工具，但是过度使用它也会导致代码复杂度增加，影响代码的可读性和可维护性。因此，我们应该在必要的时候使用 async 函数，而不是过度使用它。
2. 处理错误
在 async 函数中处理错误非常重要。我们可以使用 try/catch 语句来捕获错误，并在 catch 块中处理错误。例如：
-- -------------------- ---- -------
----- -------- --------- -
--- -
----- -------- - ----- ----------------------------------
----- ---- - ----- ----------------
------ -----
- ----- ------- -
-------------------
------ -----
-
-在上面的例子中，我们使用 try/catch 语句来捕获 fetch 方法和 response.json() 方法可能抛出的错误，并在 catch 块中输出错误信息，并返回 null 值。
3. 并行处理异步操作
在 async 函数中，我们可以使用 Promise.all() 方法来并行处理多个异步操作。例如：
async function getData() {
const [data1, data2] = await Promise.all([
fetch('https://example.com/data1').then(response => response.json()),
fetch('https://example.com/data2').then(response => response.json())
]);
return { data1, data2 };
}在上面的例子中，我们使用 Promise.all() 方法来并行处理两个异步操作，并在两个操作都完成后返回数据。
总结
在 ECMAScript 2018（ES9）中，async 函数有了新的特性和最佳实践。我们可以使用 Promise.allSettled() 方法来获取多个 Promise 对象的状态和结果，使用 Promise.prototype.finally() 方法来处理 Promise 对象的状态改变，同时还需要注意避免过度使用 async 函数，处理错误和并行处理异步操作等最佳实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660296a3d10417a222e603f1