什么是 async/await
async/await 是 ECMAScript 2017 中新增的语言特性，它是 Promise 的语法糖。通过 async/await 可以使异步代码看起来像同步代码一样，并且使异步代码更加易于编写和理解。使用 async/await 可以有效地提高代码的可读性和可维护性。
Promise 和 async/await 之间的比较
Promise 是一种异步编程模型，它解决了回调地狱的问题。但是使用 Promise 时还是有许多需要处理的问题，比如：
- Promise.resolve() 和 Promise.reject() 不直观，不容易理解。
- then 和 catch 的链式调用有时会非常难以阅读和理解。
- Promise 链的错误处理不够直观，需要使用 catch 处理错误异常。
async/await 可以在编写异步代码时去解决这些问题。async/await 使异步代码看起来像同步代码一样，具有以下优点：
- 可读性更好，更符合人的思考习惯。
- 隐藏 Promise 的一些实现细节，使得编写异步代码更加容易和直观。
- 错误处理更加简单，代码更加清晰。
重构 Promise 代码
下面是使用 Promise 实现异步代码的示例：
// javascriptcn.com 代码示例
function getUserInfo() {
return getUser()
.then(user => {
return getAddress(user)
.then(address => {
return { user, address }
})
})
}
getUserInfo().then(info => {
console.log(info)
}).catch(error => {
console.error(error)
})下面是使用 async/await 重构后的示例：
// javascriptcn.com 代码示例
async function getUserInfo() {
const user = await getUser()
const address = await getAddress(user)
return { user, address }
}
getUserInfo().then(info => {
console.log(info)
}).catch(error => {
console.error(error)
})使用 async/await 重构后，代码更加清晰易读，甚至连 then 和 catch 都不需要，异步代码的执行流程也更加符合人的思考习惯。
使用 try/catch 处理错误异常
上面的示例中，我们没有使用 catch 处理异常。这是因为在 async/await 中，我们可以使用 try/catch 来处理异常。下面是一个小例子：
async function example() {
try {
const result = await someAsynchronousFunction()
console.log(result)
} catch (error) {
console.error(error)
}
}当异步函数发生异常时，会进入 catch 中，我们可以在 catch 中捕获异常并进行相应的处理。使用 try/catch 来捕获异常可以使我们的代码更加清晰易读。
异步函数中的顺序执行
在异步函数中，我们可以使用 await 来等待函数返回结果。这种写法也是非常直观的，可以保证异步函数中的顺序执行。下面是一个例子：
async function example() {
await someAsynchronousFunction1()
await someAsynchronousFunction2()
await someAsynchronousFunction3()
}上面的代码会保证 someAsynchronousFunction1()、someAsynchronousFunction2() 和 someAsynchronousFunction3() 按照顺序执行，不会出现乱序的情况。
总结
使用 async/await 可以在编写异步代码时提高代码的可读性和可维护性，使代码更加简洁、直观和易读。在使用 async/await 的过程中，我们还需要注意一些细节，比如异常处理、顺序执行等等。相信大家在使用 async/await 时，会越来越善于使用这个语法糖，写出更加简洁、直观和易读的代码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653209a87d4982a6eb4314ff