前言
异步编程是现代开发中不可避免的问题。JavaScript 中早期异步编程的解决方案是使用回调函数，后来随着 Promise 和 Generator 的出现，解决异步编程的效率得到了极大的提升。而在 ES8 中，JavaScript 引入了 async/await 关键字，让异步编程更加简单、直观。本文将介绍 async/await 的基础与进阶。
async/await 的基础
async
async 是一个关键字，它使函数变成异步函数并返回一个 Promise 对象。在 async 函数内部，可以使用 await 关键字暂停函数执行，等待 Promise 对象处理完毕后再继续执行。下面是一个例子：
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
fetchData().then(data => console.log(data));在上面的例子中，fetchData 函数会在第一行变成一个异步函数，并返回一个 Promise 对象。在函数体内部，使用 await 关键字等待 fetch() 方法返回的 Promise 对象处理完毕，然后使用 json() 方法处理响应数据，最终返回数据。
await
await 是一个关键字，它可以暂停 async 函数的执行，等待 Promise 对象处理完毕后再继续执行。在 await 关键字后面跟着的是一个 Promise 对象，它可能是一个异步函数、一个 Promise 对象或一个返回 Promise 对象的函数。如果 Promise 对象处理成功，则 await 关键字返回 Promise.resolve(value) 返回的值，否则返回 Promise.reject(reason) 返回的值。下面是一个例子：
-- -------------------- ---- -------
----- -------- ----------- -
----- -------- - ----- --------------------------------------
-- ---------------- --- ---- -
----- ---- - ----- ----------------
------ -----
- ---- -
----- --- ---------------------------
-
-
-----------
---------- -- ------------------
------------ -- ----------------------在上面的例子中，fetchData 函数中的第一行使用 await 关键字等待 fetch() 方法返回的 Promise 对象处理完毕。如果响应状态码是 200，则使用 await 关键字等待 json() 方法返回的 Promise 对象处理完毕，然后返回数据。如果响应状态码不是 200，则使用 throw 语句抛出一个错误，对应的 catch 方法会捕捉这个错误并进行处理。
async/await 的进阶
错误处理
当使用 async/await 进行异步编程时，需要注意错误处理。如果 Promise 对象处理失败，则将进入 reject 状态并抛出一个错误。为了捕捉这个错误，使用 try/catch 语句可以将 await 关键字包围起来。下面是一个例子：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- --------------------------------------
-- ---------------- --- ---- -
----- ---- - ----- ----------------
------ -----
- ---- -
----- --- ---------------------------
-
- ----- ------- -
---------------------
-
-
------------在上面的例子中，如果 Promise 对象处理失败，则将进入 catch 语句块中的代码并抛出一个错误。catch 语句块中的代码会捕捉这个错误并输出到控制台中。
并发处理
使用 async/await 进行并发处理可以加快异步代码的执行速度。下面是一个例子：
-- -------------------- ---- ------- ----- -------- --------------- - ----- -------- - ------------ -- ------------ ----- --------- - ----- ---------------------- ----- ---- - ----- ---------------------------------- -- ------------------ ------ ----- - ----------- --------------------------------- --------------------------------- -------------------------------- ------------ -- -------------------
在上面的例子中，fetchData 函数中并发处理了多个请求。使用 map() 方法遍历 urls 数组，生成多个 fetch() 方法的 Promise 对象，并将它们存储在 promises 数组中。在 await 关键字后面使用 Promise.all() 方法等待所有的 Promise 对象处理完毕，Promise.all() 方法会返回一个数组，其中包含每个 Promise 对象的处理结果。使用 map() 方法遍历 responses 数组，生成多个 response.json() 方法的 Promise 对象，并将它们存储在 data 数组中。最终返回 data 数组，其中包含多个请求处理的结果。
async/await 和 Generator
在 ES6 中，JavaScript 引入了 Generator，它可以将异步操作转换成同步操作，用于解决回调函数的嵌套问题。在 ES8 中，async/await 相比 Generator 更加简洁、直观。可以将 async 函数看作是 Generator 函数的语法糖，使用 async/await 可以更加直观、流畅地进行异步编程。
结语
async/await 是 ES8 中非常实用的异步编程解决方案。使用 async/await 可以让异步编程更加简单、直观。本文介绍了 async/await 的基础与进阶，包括错误处理、并发处理和与 Generator 的比较。希望本文对你的学习和开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67822fd4935627c900fbbd6e
