Promise 是 JavaScript 中处理异步操作的一种方式，用于解决回调地狱的问题。然而，随着代码逻辑的复杂度增加，Promise 内部的异步代码也会变得越来越难以管理。这时候，async/await 就成了一个非常好的解决方案，使得异步代码风格变得更加优美，易于维护。
async/await 是什么？
async 是一个用于定义异步函数的关键字，可以在函数前加上它来声明一个异步函数：
async function fetchData() {
// 异步代码
}await 是一个用于暂停当前执行直到异步操作完成的关键字，只能在异步函数内部使用。当在异步函数中使用 await 关键字时，该函数会被暂停，直到该操作完成并返回结果：
async function fetchData() {
const data = await fetch("https://example.com/data");
console.log(data);
}上述代码中，fetch 是一个异步的网络请求函数，它返回一个 Promise 对象。使用 await 可以在异步函数 fetchData 内暂停执行，直到 fetch 函数返回结果。
Promise 和 async/await
Promise 和 async/await 都是用于处理异步代码的方式，它们之间有着密不可分的关系。事实上，async/await 只是对 Promise 的一层封装和语法糖。下面是一个使用 Promise 和 async/await 分别实现的例子：
-- -------------------- ---- -------
-- -- -------
-------- ----------- -
---------------------------------
-------------- -- ----------------
---------- -- ------------------
------------ -- ----------------------
-
-- -- -----------
----- -------- ----------- -
--- -
----- -------- - ----- ----------------------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
-两个函数的功能是一样的，都是向远程服务器获取数据并输出到控制台。但是可以看到，使用 async/await 可以使代码更加简洁易懂，避免了 Promise 内部的冗长嵌套。
使用 async/await 需要注意的事项
尽管 async/await 可以使异步代码更加易读易写，但是在实际使用中还是有一些需要注意的事项。
1. 必须在异步函数内部使用
await 关键字只能在异步函数内部使用，如果在同步代码中使用它会导致语法错误。
2. async 函数返回 Promise 对象
由于 async 函数本身就是用于处理异步操作的，因此它必须返回一个 Promise 对象。如果 async 函数返回一个非 Promise 类型的值，那么它的结果会被自动包装为 Promise 对象。下面是一个返回 Promise 对象的例子：
async function fetchUser() {
const response = await fetch("https://example.com/user");
const user = await response.json();
return user;
}3. 处理异常需要使用 try/catch
在异步函数中使用 await 时，如果 Promise 对象被 reject，那么就会抛出一个异常。因此，异步函数的错误处理应该使用 try/catch 块。下面是一个捕获异常的例子：
-- -------------------- ---- -------
----- -------- ----------- -
--- -
----- -------- - ----- ----------------------------------
----- ---- - ----- ----------------
------------------
- ----- ------- -
---------------------
-
-4. 多个 async 函数之间的依赖关系
在编写复杂的异步代码时，一个异步函数可能依赖于另一个异步函数的结果，因此需要保证它们的执行顺序。下面是一个使用 Promise 和 async/await 实现的示例：
-- -------------------- ---- -------
-- -- -------
-------- ----------- -
------ ---------------------------------
-------------- -- -----------------
-
-------- ------------------ -
------ ---------------------------------------------------
-------------- -- -----------------
-
-----------
---------- -- --------------------
----------- -- -------------------
------------ -- ----------------------
-- -- -----------
----- -------- ----------- -
----- -------- - ----- ----------------------------------
------ ----------------
-
----- -------- ------------------ -
----- -------- - ----- ----------------------------------------------------
------ ----------------
-
----- -------- ----------- -
--- -
----- ---- - ----- ------------
----- ----- - ----- --------------------
-------------------
- ----- ------- -
---------------------
-
-
------------可以看到，使用 async/await 可以让逻辑更加清晰、简洁。
结论
在 JavaScript 中，异步操作是非常常见的，因此使用 Promise 和 async/await 来处理异步代码是必不可少的。async/await 可以使异步代码风格更加清晰、易读，但也要注意一些潜在的问题。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e6cbbe884a3e30f265e7f