前端开发中，Promise 成为了一个十分重要的 API，可用于异步操作的解决方案。async/await 是在 ECMA2017 中正式被引入的，具有更加直观、易懂的特点。本文将介绍在 Promise 中如何使用 async/await，并探讨其优劣和注意事项。
async/await 的使用
async/await 可以让异步的代码看起来像同步的，使得代码的可读性更好，而且可以结合 try/catch 方便地处理异常。以下是一个使用 async/await 的示例：
-- -------------------- ---- ------- -------- --------- - ------ --- --------------- -- ------------------- ---- - ----- -------- ------ - -------------------- ----- ----------- ------------------ - ------
代码中我们定义了一个 sleep 函数，然后在 test 函数中使用 async/await 调用该函数。在调用 sleep 函数时，程序将会等待该函数内部的异步操作返回结果。
async/await 的优点
async/await 有以下几个优点：
代码可读性更高
async/await 使异步的代码看起来更加直观，更像同步的代码结构，减少了一些回调函数的嵌套，提高了代码的可读性。
可以在代码中使用 try/catch，方便地处理异常
使用 async/await 时，如果发生异常，可以使用 try/catch 进行捕获，而不需要使用回调函数的方式进行错误处理。
可以使用同步的方式编写异步操作
async/await 可以让你在写异步操作时，用同步的方式编写代码，不需要去考虑控制异步操作的流程。
async/await 的缺点
async/await 也有一些缺点：
需要对 Promise 有一定的了解
需要对 Promise 有一定的了解，尤其是 Promise 中的 resolve 和 reject。如果对 Promise 不是很了解，那么有可能会导致出错。
只能在异步函数内使用
async/await 只能在异步函数内使用，这意味着对于一些需要多个异步操作的情况，我们需要写多个异步函数，会导致代码量增多。
可能会阻塞主线程
如果异步操作执行时间较长，会导致主线程被占用，可能会阻塞其他的操作。
注意事项
使用 async/await 时需要注意以下几点：
async 函数返回值为 Promise
async 函数返回的结果是一个 Promise 对象，如果 async 函数没有显式地返回一个 Promise 对象，那么 JavaScript 引擎将会自动将结果封装为一个 Promise 对象。
async function test() {
return 'hello'
}
test().then(result => console.log(result)) // 'hello'await 关键字只能在 async 函数内使用
await 关键字只能在 async 函数内使用，如果在其他函数内使用，会导致语法错误。
// 错误示例
function test() {
const result = await Promise.resolve('hello')
console.log(result)
}await 关键字只能在 Promise 实例前面使用
await 关键字只能在 Promise 实例前面使用，如果使用在其他实例前面，会导致语法错误。
// 错误示例
async function test() {
const result = await 'hello'
console.log(result)
}Promise 实例必须先创建
Promise 实例必须在使用 await 关键字前先创建，否则会导致语法错误。
// 错误示例
async function test() {
const result = await new Promise(resolve => resolve('hello'))
console.log(result)
}总结
async/await 是我们在使用 Promise 时的一种更加优雅的实现方式，使得异步操作的代码更加直观易读，也更加方便地处理异常。
在使用 async/await 时，需要注意 await 关键字的使用场景，也需要对 Promise 有一定的了解，避免出错。我们可以通过它来编写优美的异步操作代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481d12348841e989414a2e7