前言
在现代的前端开发中，异步编程已经成为了不可或缺的一部分，而 JavaScript 作为一种支持异步编程的语言，也在不断的优化异步编程的方法。ECMAScript 2017 中引入了异步函数和 Promise 对象，可以使异步编程变得更加简单和直接。本文将介绍异步函数和 Promise 对象的基本用法和应用。
异步函数
基本用法
异步函数是一种用 async 关键字声明的函数，其返回值是一个 Promise 对象。异步函数可以通过 await 关键字等待 Promise 对象的状态变化。比如：
async function test() {
const data = await getData();
console.log(data);
}
test();在上面的代码中，test 函数是一个异步函数，其中 getData() 函数返回一个 Promise 对象。在调用 test() 函数时，await getData() 表示等待 getData() 函数完成，然后把结果赋值给 data 变量。一旦 Promise 对象的状态变为 fulfilled，test() 函数就会继续执行下去。
异步函数内部可以有多个 await 表达式，这些表达式会依次执行并等待前面的表达式完成：
async function fetchData() {
const data1 = await getData1();
const data2 = await getData2();
console.log(data1, data2);
}
fetchData();在上面的代码中，fetchData 函数先等待 getData1 函数完成，然后再等待 getData2 函数完成，最后输出两个结果。
错误处理
异步函数内部可以使用 try...catch 语句捕获异步操作产生的错误：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- ---- - ----- ----------
------------------
- -------- -
-----------------------
-
-
------------在上面的代码中，如果 await getData() 操作发生错误，就会被捕获并输出错误信息。
并发执行
异步函数的一个优点是可以并发执行多个异步操作。比如：
-- -------------------- ---- -------
----- -------- ----------- -
----- ------- ------ - ----- -------------
-----------
-----------
---
------------------ -------
-
------------在上面的代码中，Promise.all 方法可以并行执行多个 Promise，等到所有 Promise 都执行完毕后，再去执行回调函数。这里使用数组解构的方式获取返回的数据。
Promise 对象
基本用法
Promise 是异步编程的一种解决方案，可以使代码的执行顺序更加清晰和可读。Promise 对象包含三种状态：pending、fulfilled 和 rejected。当 Promise 的状态变为 fulfilled 或 rejected 时，就会执行对应状态下的回调函数。比如：
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
------------- -- -
-------------- -----------
-- ------
---
--------------------- -- -
--------------------
---------------- -- -
-------------------
---在上面的代码中，通过 new Promise() 创建了一个 Promise 对象，该 Promise 对象在 1 秒后变为 fulfilled 状态，并返回值 Hello Promise!。接着通过 then 方法定义了一个回调函数，并输出返回结果。
错误处理
在 Promise 对象中，可以通过 catch 方法处理异常：
const promise = new Promise((resolve, reject) => {
reject(new Error('Promise error!'));
});
promise.catch((error) => {
console.log(error.message);
});在上面的代码中，通过 reject 方法让 Promise 对象变为 rejected 状态，并传入错误信息。接着通过 catch 方法捕获错误并输出错误信息。
当同时使用 catch 方法和 then 方法时，需要将 catch 方法放在 then 方法后面：
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - ---------- -------------- ---------- --- --------------------- -- - -------------------- ---------------- -- - --------------------------- ---
在上面的代码中，当 Promise 对象变为 rejected 状态时，会先执行 catch 方法，然后再执行 then 方法。
并发执行
和异步函数类似，Promise 对象也可以并行执行多个异步操作。比如：
const promise1 = getData1();
const promise2 = getData2();
Promise.all([promise1, promise2]).then((results) => {
console.log(results);
}).catch((error) => {
console.log(error);
});在上面的代码中，通过 Promise.all 方法并行执行了 getData1() 和 getData2() 两个异步操作，并将结果传给回调函数进行处理。
总结
异步函数和 Promise 对象是现代 JavaScript 异步编程的两个重要特性，可以优化异步代码的可读性和可维护性。异步函数内部可以依次执行多个异步操作，而 Promise 对象可以并行执行多个异步操作。我们可以根据实际需求来选择使用不同的方式，提高代码的效率和质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64adfed648841e98949f1f03