引言
在前端开发中，异步编程是非常常见的一种编程方式。在 JavaScript 中，我们经常使用 Promise 或回调函数来处理异步操作。然而，使用 Promise 或回调函数时，链式调用或嵌套回调的写法很容易导致代码可读性降低、维护性下降等问题。
为了解决这些问题，ES2017（ES8）推出了 async/await，它是一种更简单、更清晰的异步编程方式。本文将会对 async/await 用法进行详细介绍。
async/await 用法
1. async 函数
async 函数是异步函数的一种，它被定义为一个普通函数前加上 async 关键字。async 函数返回的是一个 Promise 对象。
下面是一个简单的 async 函数的例子：
async function f() {
return 1;
}
f().then(console.log); // 1上述代码中，async 函数 f() 执行后返回的是一个 Promise 对象，并且返回的值是 1。
2. await 表达式
await 表达式只在 async 函数内部使用，它用于等待一个 Promise 对象 resolve，并且返回 resolve 后的结果。await 表达式会阻塞后面的代码运行，直到 Promise resolve 后再继续执行。
下面是一个简单的 await 表达式的例子：
-- -------------------- ---- -------
----- -------- --- -
--- ------- - --- ----------------- ------- -- -
------------- -- ----------------- ------
---
--- ------ - ----- -------- -- -- ------- -------
-------------------- -- -----
-
----在上述代码中，我们定义了一个 Promise 对象，并在 setTimeout 函数中 resolve 这个 Promise。在 async 函数 f() 中，我们用 await 表达式等待 Promise resolve 后返回 resolve 的结果：done!
3. try...catch 区块
async 函数中的错误处理更像是使用同步代码的 try...catch 区块。如果异步操作在 async 函数中出错，它会 throw 一个 Error 对象，这样我们就可以使用 try...catch 区块来捕捉这个错误。
下面是一个简单的 try...catch 区块的例子：
-- -------------------- ---- -------
----- -------- --- -
--- -
--- -------- - ----- ----------------------------------------------------
--- ----- - ----- ----------------
-------------------
- ----- ------- -
-------------------
-
-
----在上述代码中，我们发起一个 AJAX 请求，将返回的数据转换成一个 JSON 对象，然后输出 JSON 对象的内容。如果 AJAX 请求出错，我们使用 try...catch 区块来捕捉这个错误。
async/await 优势
async/await 相比使用 Promise 或回调函数有如下优势：
1. 更简洁的代码
async/await 写法可以让我们的异步代码看起来更像是同步代码，没有了链式调用或嵌套回调的写法，代码逻辑更加清晰，阅读和维护都更加容易。
下面是一段使用 async/await 的示例代码：
async function printUsers() {
let response = await fetch('https://jsonplaceholder.typicode.com/users');
let users = await response.json();
console.log(users);
}
printUsers();我们可以看到，使用 async/await 的写法比使用 Promise 的写法或回调函数的写法看起来更加简洁、可读性更高。
2. 更高的可维护性
使用 async/await，我们可以使用同步的写法来编写异步代码，这样代码的可读性和可维护性都会得到提高。
当我们需要修改异步代码时，比如加入新的异步操作，就可以像修改同步代码一样修改，不需要再添加额外的 Promise 或回调函数的嵌套，这样不仅代码的可维护性得到了提高，而且也减少了代码量。
总结
本文介绍了 async/await 的用法和优势。async/await 非常适合处理异步操作，它能够让我们的异步代码看起来像同步代码，这样代码逻辑更加清晰，阅读和维护都更加容易。我们建议开发者在异步编程中使用 async/await，以提高代码的可维护性和可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ed9e52f6b2d6eab37c4ce8