在前端开发中，异步编程是非常常见而且重要的。在 JavaScript 中，我们通常使用回调函数、Promise、Generator 等方式来处理异步操作。然而这些方式都有其自己的局限性，例如回调函数容易导致代码嵌套过多、Promise 链式调用繁琐、Generator 需要手动迭代等等。为了解决这些问题，ECMAScript 2015 引入了 async/await 语法糖，使得异步编程变得更加简单和直观。
async/await 的基本用法
async/await 可以让我们使用类似同步代码的方式来处理异步操作。其中 async 用于声明一个函数为异步函数，而 await 则用于等待异步操作完成并返回其结果。示例如下：
async function fetchData(url){
const response = await fetch(url);
const data = await response.json();
return data;
}上述代码使用了 async/await 来获取一个 URL 对应的 JSON 数据。我们首先使用 Fetch API 发送一个网络请求，然后使用 await 等待响应对象的返回。在得到响应后，我们再次使用 await 等待解析后的 JSON 数据。最后，我们返回这个数据并由调用者使用。
错误处理
在异步操作中，错误处理是一个常常需要关心的问题。传统的方式中我们通常使用回调函数机制来监听请求的错误，例如：
-- -------------------- ---- -------
------------------------ -- -
--------------- -
------ ----------------
- ---- -
----- --- -------------- ---------
-
------------ -- -
-- -- --------- ---- ----
-------------- -- -
---------------------
---使用 async/await 来处理错误则更加直观简洁：
-- -------------------- ---- -------
----- -------- -------------- -
--- -
----- -------- - ----- -----------
--------------- -
----- ---- - ----- ----------------
------ -----
- ---- -
----- --- -------------- ---------
-
- ------------ -
---------------------
-
-上述代码通过在异步函数中使用 try/catch 语句块来捕获可能发生的错误。如果网络请求成功，我们仍然使用 await 来等待数据的处理，如果请求失败则直接抛出一个错误对象。在 catch 语句块中，我们可以对捕获到的错误进行处理。
并行处理多个异步操作
在实际应用中，我们可能需要同时处理多个网络请求或数据库操作等异步操作。使用 async/await 可以让处理这些操作变得更加直观和方便。
async function fetchMultiple() {
const [data1, data2] = await Promise.all([
fetchData('https://api.example.com/data1'),
fetchData('https://api.example.com/data2')
]);
// do something with data1 and data2
}上述代码中，我们使用 Promise.all 方法并行发送了两个网络请求，然后使用 await 等待两个请求都完成，并将结果分别存储在 data1 和 data2 中。在得到这些数据后，我们可以做一些自己的处理。
async/await 和 Generator 的比较
除了 async/await，Generator 也可以用来处理异步操作，例如：
function* gen() {
const data1 = yield fetchData('https://api.example.com/data1');
const data2 = yield fetchData('https://api.example.com/data2');
// do something with data1 and data2
}
const iter = gen();
iter.next().value.then(data1 => iter.next(data1).value).then(data2 => iter.next(data2));上述代码使用 Generator 和一个迭代器对象来处理两个异步操作的返回值。在 Generator 函数上，我们通过 yield 来让异步调用暂停，并以变量存储其返回值。在调用 Generator 函数时，我们需要手动迭代这个迭代器对象并在上一个 yield 语句返回值时将其传递给下一个。
虽然 Generator 也可以处理异步操作，但是相比 async/await 它需要手动迭代来处理每个异步操作，代码看起来相对复杂。而 async/await 则可以让我们像处理同步代码一样处理异步操作，代码更加简洁易懂。
总结
使用 ECMAScript 2015 的 async/await 可以让我们更加方便直观地处理异步操作，避免了回调函数和 Promise 链式调用带来的冗余和嵌套。在实际开发中，我们可以结合 try/catch、Promise.all 等方法来处理异步操作中的错误和多个操作的并行调用。在选择异步编程的方式时，我们可以酌情选择 async/await 或者 Generator 等方式，但是建议尽量使用 async/await 来写更加简洁和直观的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aed8d448841e9894b081a6