在现代的前端开发中，异步请求操作极其常见。我们通常使用 JavaScript 中的回调函数或 Promise，来处理异步的响应结果。随着 ECMAScript 越来越流行，它为我们提供了一种更加简便的处理异步请求的方式： async/await。
什么是 async/await
async/await 是 ECMAScript 8 的一个新特性，它提供了一种处理异步操作的方法，基于 JavaScript 中的 Promise 的特性。async/await 可以让待处理请求的响应结果看起来像同步的代码，而不是像回调或 Promise 那样的异步代码。
async/await 并不是一个新的异步模型，而是在 Promise 上加上了一层语法糖。它实际上是使用 Promise 来管理异步操作，但是带来了更简单的语法，代码的可读性大大提高。
如何使用 async/await
在使用 async/await 时，需要将要等待的代码放在 async 函数中。使用 await 关键字来等待一个 Promise 完成，并且它只能在 async 函数中使用。
下面是一个使用 async/await 的示例代码，它演示了如何使用 Google API 获取搜索结果。
async function getSearchResults(keyword) {
try {
const response = await fetch(`https://www.googleapis.com/customsearch/v1?key=API_KEY&cx=SEARCH_ENGINE_ID&q=${keyword}`);
const data = await response.json();
return data.items;
} catch (error) {
console.error(error);
}
}
getSearchResults("JavaScript")
.then((searchResults) => {
console.log(searchResults);
})
.catch((error) => {
console.error(error);
});我们可以看到，在定义函数 getSearchResults 的时候，它的函数名前面有一个 async 关键字。同时，在函数中，使用了 await 关键字来等待 Promise 执行结果。在该示例代码中，我们使用了 fetch() 方法来获取一个 Google 搜索结果的 JSON 数据。await 关键字让函数暂停执行，直到 Promise 完成，将数据转换为 JSON 并返回其中的 "items" 字段。
在调用 getSearchResults() 函数时，我们使用了 Promise 的 .then() 方法来获取 Promise 的值，或者使用 .catch() 方法捕获 Promise 中的错误。
async/await 的优势
使用 async/await 的优势主要体现在代码可读性和错误处理方面。
更加可读的代码
使用 async/await 可以让代码更加直观，因为它可以使异步的代码看起来像同步的代码，从而提高代码的可读性。在传统的异步代码中，回调函数可能会嵌套多层，使代码难以阅读。而使用 async/await，就可以避免多层嵌套的问题，促进代码的可读性。
更加容易处理错误
使用 async/await，可以使用 try-catch 语句来捕获 Promise 中发生的错误，并且我们可以使用 throw 关键字来抛出自定义的错误消息。这比使用回调代码恶心和冗长的错误处理要方便得多。
总结
async/await 是一种流行的异步 JavaScript 编程方法。它使用 ECMAScript 8 引入的 async/await 特性来管理异步操作。async/await 可以让异步操作看起来像同步的代码，从而提高代码的可读性，同时也使得处理错误变得更加容易。在实际开发中，我们应该尽可能使用 async/await 来管理异步操作，以提高代码质量和开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65966aaeeb4cecbf2da3dcaa