随着 JavaScript 语言的发展，异步编程已成为现代编程中不可或缺的一部分，而在 ES8 中引入了 async 和 await 两个关键字，它们用于简化异步操作的写法。本文将详细讲解 async 和 await 在 JavaScript 中的使用，为前端开发者提供更便捷的异步编程体验。
1. 异步编程
在讲解 async 和 await 前，先来了解一下 JavaScript 中的异步编程。
在 JavaScript 中，常见的异步编程有两种方式：回调函数和 Promise。在回调函数中，一个函数作为参数传递给另一个函数，在前一个函数执行完毕后调用后一个函数；而 Promise 是一种更加优雅的异步编程方式，它的特点是可以链式调用，避免了回调地狱的问题。下面分别给出回调函数和 Promise 的示例代码：
1.1 回调函数
-- -------------------- ---- -------
-- --------
-------- ------------- --------- -
--- --- - --- -----------------
---------------------- - ---------- -
-- --------------- --- - -- ---------- --- ---- -
---------------------------
-
-
--------------- ---- ------
-----------
-
--------------------- ---------------- -
--------------------
---上面的代码中，loadData 函数接受两个参数，其中第二个参数是回调函数，用于处理数据请求得到的结果。在回调函数中打印出了返回的结果。
1.2 Promise
-- -------------------- ---- -------
-- ------- ----
-------- ------------- -
------ --- ------------------------- ------- -
--- --- - --- -----------------
---------------------- - ---------- -
-- --------------- --- -- -
-- ----------- --- ---- -
--------------------------
- ---- -
---------- -----------------------
-
-
-
--------------- ---- ------
-----------
---
-
------------------------------------------- -
--------------------
------------------------ -
-------------------
---上面的代码中，loadData 函数返回了一个 Promise 对象，在该对象上可以调用 then 方法和 catch 方法，以处理异步操作成功和失败的情况。在 then 方法和 catch 方法中分别打印出了返回的结果和错误信息。
2. async 和 await
在上面的代码中，Promise 的写法已经让我们摆脱了回调地狱的问题，但是随着业务逻辑的复杂，代码可读性还是略有欠缺。为了进一步简化代码，ECMAScript 2017 引入了 async 和 await，让异步编程更加轻松。
2.1 async
async 函数简单来说就是返回一个 Promise 对象。同时，async 函数内部会自动将普通值转换为 Promise，以方便后续使用。下面给出 async 函数示例代码：
// async 示例代码
async function getData(url) {
const response = await fetch(url);
const json = await response.json();
return json;
}
getData('data.json').then(data => console.log(data));上面的代码中，getData 函数前面加上了 async 关键字，表明该函数内部有异步操作。在函数中使用了 fetch 方法请求数据，并在后面使用了 await 关键字，表示要等到 fetch 方法执行完毕后再继续执行下面的代码。因为 getData 函数返回的是一个 Promise 对象，所以我们可以使用 then 方法进行处理，简化了代码的可读性。
2.2 await
await 关键字用于等待异步操作执行结束，并接收异步操作返回的结果。如果 await 后面的操作返回的是 Promise，那么 await 将会阻塞代码的执行，直到 Promise 被 resolve 或 reject。下面给出 await 示例代码：
-- -------------------- ---- ------- -- ----- ---- ----- -------- ---------- - ----- ----- - ----- ---------------------- ------------------- ----- ----- - ----- ---------------------- ------------------- - -----------
上面的代码中，loadData 函数在调用 getData 方法时使用了 await 关键字，表示需要等待数据加载完毕后才继续执行下面的代码。这样，我们就可以轻松地处理异步操作，不再需要过多的回调函数和 Promise。
3. 总结
在本文中，我们详细讲解了 JavaScript 中的异步编程方式和 ES8 中新引入的 async 和 await 关键字。通过使用 async 和 await，我们可以避免过多的回调函数和 Promise，让代码更加简洁易懂。在编写异步代码时，可以优先考虑使用 async 和 await 来实现，享受更加便捷的异步编程体验。
注：上述示例代码使用了 fetch API 和 XMLHttpRequest，如需运行或测试代码，请自行修改部分代码以适应不同环境。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64648d43968c7c53b056c876