JavaScript async/await

引入

在现代的Web开发中，异步编程是不可或缺的一部分。处理异步操作可以让你的应用程序更加流畅和响应迅速。JavaScript 中处理异步操作的方式有很多，比如回调函数、Promise 等等。然而，随着异步操作变得越来越复杂，这些方法逐渐显得力不从心。为了简化异步代码的编写，ECMAScript 2017 引入了 async 和 await 关键字。

基本概念

什么是Async函数？

async 函数是一种定义异步操作的方式。它返回一个 Promise 对象，这个对象的状态由函数内部的操作决定。当函数执行时，它会立即返回一个 Promise 对象，并且不会阻塞主线程。

什么是Await关键字？

await 关键字只能在 async 函数内部使用。它的作用是等待一个 Promise 对象的状态变为 resolved 或 rejected。一旦 Promise 对象的状态改变，await 表达式的值就会变成那个 Promise 的结果。

如何使用Async/Await

定义一个Async函数

async function getName() {
    return '张三';
}

使用Await关键字

async function getUserName() {
    const name = await getName();
    console.log(name);
}

getUserName(); // 输出 "张三"

注意：await 关键字只能在 async 函数内部使用。如果你在一个非异步函数中尝试使用 await，那么将会抛出错误。

异常处理

Try/Catch语句

由于 await 表达式可能会抛出异常，因此我们通常需要使用 try/catch 语句来捕获这些异常。

// www.javascriptcn.com code example
async function getUserName() {
    try {
        const name = await getName();
        console.log(name);
    } catch (error) {
        console.error(error);
    }
}

getUserName();

捕获拒绝的Promise

如果 await 后面跟着的是一个被拒绝的 Promise，那么这个拒绝会被转换成一个异常。

// www.javascriptcn.com code example
async function getUserAge() {
    try {
        const age = await getAge();
        console.log(age);
    } catch (error) {
        console.error(error);
    }
}

getUserAge(); // 如果getAge返回一个被拒绝的Promise，则会在catch块中处理

并行异步操作

使用Promise.all

有时我们需要同时执行多个异步操作。这时可以使用 Promise.all 方法来并行执行多个 Promise。

// www.javascriptcn.com code example
async function fetchUsers() {
    const [user1, user2] = await Promise.all([fetchUser1(), fetchUser2()]);
    console.log(user1, user2);
}

function fetchUser1() {
    return new Promise((resolve) => setTimeout(() => resolve('张三'), 1000));
}

function fetchUser2() {
    return new Promise((resolve) => setTimeout(() => resolve('李四'), 1500));
}

fetchUsers(); // 输出 "张三 李四"

使用for循环

当你需要对数组中的每个元素执行异步操作时，可以使用 for 循环配合 await 关键字。

// www.javascriptcn.com code example
async function processUsers(users) {
    for (const user of users) {
        const userInfo = await fetchUserInfo(user.id);
        console.log(userInfo);
    }
}

async function fetchUserInfo(userId) {
    return new Promise((resolve) => setTimeout(() => resolve({ id: userId, name: '用户' + userId }), 1000));
}

processUsers([{id: 1}, {id: 2}]);

总结

通过使用 async 和 await，我们可以写出更简洁、更易读的异步代码。虽然它们只是语法糖，但极大地提高了开发效率和代码质量。希望本章的内容能够帮助你在实际项目中更好地运用 async 和 await。