Promise 中的 async 和 await-JavaScript中文网-JavaScript教程资源分享门户

前言

在 JavaScript 中，异步编程是一项非常重要的技术。各种异步操作，如网络请求、文件读写等操作，都必须以异步方式进行。Promise 是一种处理异步操作的规范，在大型 Web 应用的开发中，Promise 的应用非常广泛。

但是，Promise 的编写方式比较繁琐，容易出错，尤其是当需要将多个 Promise 进行组合时，代码会变得更为复杂。为了简化 Promise 的编写过程，ES2017 引入了 async 和 await 这两个关键字，使得异步编程变得更加直观、简洁。

本文主要介绍 Promise 中的 async 和 await 的用法与注意事项。

async 函数

async 是一个用于定义异步函数的关键字。我们可以使用 async 来修改一个普通函数，使其成为一个异步函数。async 函数会自动返回一个 Promise 对象，函数返回值会被 Promise.resolve() 包装。例如：

async function foo() {
    return 1;
}

foo().then((value) => {
    console.log(value); // 输出 1
});

在上面的例子中，foo 函数是一个异步函数，返回值是 1。foo 函数在执行时，会自动返回一个 Promise 对象，然后 resolve(1)。

我们还可以将 async 函数和 Promise 对象一起使用。例如：

async function foo() {
    return Promise.resolve(1);
}

foo().then((value) => {
    console.log(value); // 输出 1
});

在上面的例子中，foo 函数返回一个 Promise 对象(Promise.resolve(1))。当 foo 函数执行完成后，Promise 对象的状态将变为 resolved。

await 表达式

await 表达式是 async 函数的关键字，用于暂停 async 函数的执行，等待 Promise 对象的 resolve。在 await 表达式后面跟随一个 Promise 对象，其返回值会暂停 async 函数后面的代码执行，并将 Promise 对象的 resolve 值返回。

例如：

async function foo() {
    let result = await Promise.resolve(1);
    console.log(result);
}

foo(); // 输出 1

在上面的例子中，await 表达式暂停了 foo 函数的执行，等待 Promise.resolve(1) 的 resolve 值，即返回值 1，然后将其赋值给 result。最后执行 console.log(result)，输出 1。

如果 await 表达式后面的 Promise 对象状态为 rejected，则会抛出一个异常。我们可以使用 try...catch... 块来处理异常。例如：

-- -------------------- ---- -------
----- -------- ----- -
    --- -
        --- ------ - ----- ------------------ ----------------
    - ----- --- -
        -----------------------
    -
-

------ -- -- -----

在上面的例子中，await 表达式等待 Promise.reject(new Error("Error")) 的 resolve 值。但是，Promise 对象状态为 rejected，又因为 await 会自动把 Promise.reject(new Error("Error")) 包装成一个 rejected 状态的 Promise 对象，所以会抛出一个异常，并通过 catch 捕获处理。

我们还可以使用 Promise.all() 方法将多个 Promise 对象组合，然后使用 await 表达式来等待其 resolve 值的返回。例如：

async function foo() {
    let results = await Promise.all([Promise.resolve(1), Promise.resolve(2), Promise.resolve(3)]);
    console.log(results);
}

foo(); // 输出 [1, 2, 3]

在上面的例子中，我们使用了 Promise.all() 方法和 await 表达式，等待多个 Promise 对象的 resolve 值返回。最终 console.log 输出 [1, 2, 3]。

总结

我们在这里介绍了 Promise 中的 async 和 await 的用法与注意事项。这两个关键字可以使异步编程变得非常直观、简洁，但是我们要注意下面几点：

async 函数会自动返回一个 Promise 对象，返回值会被 Promise.resolve() 包装。
await 表达式会暂停 async 函数的执行，等待 Promise 对象的 resolve，并将其返回值赋值给 await 表达式。
await 表达式后面如果是一个 rejected 的 Promise 对象，则会抛出异常，并通过 try...catch... 块进行处理。
我们可以使用 Promise.all() 方法来组合多个 Promise 对象，并使用 await 表达式等待其 resolve 值的返回。

参考资料

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64528fcb968c7c53b071c043