在 JavaScript 应用程序中，异步编程一直是一个挑战。回调函数和 Promise 是最受欢迎的解决方法，但它们并不总是简单直观。ES6 引入了 async/await 关键字，使得异步编程更加直观和易于理解。
async/await 简介
async/await 允许开发者写出看起来像同步代码的异步操作。当某个函数使用 async 关键字时，这个函数就会成为一个 async 函数，并且可以在内部使用 await 关键字来等待异步请求完成。当一个异步请求启动后，在遇到 await 关键字之前，async 函数不会执行下一行代码。
举个栗子，假设我们有一个函数 fetchData()，用来获取数据：
function fetchData() {
return fetch('http://example.com/data')
.then(response => response.json())
}如果我们要在外部使用该函数，我们可能需要像这样进行操作：
fetchData() .then(data => doSomethingWithData(data)) .catch(error => handleTheError(error))
然而，使用 async/await 可以让代码简洁和更易于阅读，如下所示：
async function fetchData() {
const response = await fetch('http://example.com/data')
const data = await response.json()
return data
}现在我们可以直接调用 fetchData() 函数，就像同步代码一样：
try {
const data = await fetchData()
doSomethingWithData(data)
} catch (error) {
handleTheError(error)
}async/await 的优点
相对于回调函数或者Promise解决方案，使用 async/await 提供了以下几个优点：
可读性更高：使用
async/await编写的代码更像同步代码，因为它们通常是简单明了的顺序语句。错误处理更简单：使用
try/catch来捕获错误更容易。同时，await可以等待 Promise resolve 或 reject，我们可以使用标准的try/catch块处理异常而不需要额外的操作。对异步操作的链式调用也更友好：迭代 Promise 链条会涉及到许多嵌套的 Promise.then() 易令代码结构混乱臃肿，尤其当出现适应 Promise 中间结果的逻辑控制时更容易出问题。而使用
async/await就可以打破 Promise 链式换行，使异步操作的逻辑更加清晰与严谨。
示例代码实现
// javascriptcn.com 代码示例
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}
async function process(items) {
for (const item of items) {
console.log('start', item)
await delay(1000)
console.log('end', item)
}
}
process([1, 2, 3])以上函数可以按顺序在控制台输出：
start 1 end 1 start 2 end 2 start 3 end 3
总结
async/await 是一种强大和有用的异步编程模型，提供了可读性更高、错误处理更简单，对异步操作的链式调用也更友好等优点。当你需要处理异步请求时，不妨考虑使用 async/await ，适应这种新语法并将其运用到自己的项目中，可以帮助您更加轻松地完成任务。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6529be3a7d4982a6ebc2adcf