什么是 await？-CSDN博客

本文链接：https://blog.csdn.net/2501_91537388/article/details/147335776

一、什么是 await？

在 JavaScript 中，await 是一个用于处理异步操作的关键字。它与 async 关键字一起使用，使得异步代码的编写更加简洁和直观。简单来说，await 允许我们在执行到某个异步操作时暂停当前函数的执行，直到该操作完成并返回结果。

二、基本语法与用法

要在 JavaScript 中使用 await，首先需要将函数声明为 async 函数。async 关键字用于标记一个函数是异步的，这样在函数内部就可以使用 await 来等待 Promise 的完成。

示例代码：

// 定义一个返回Promise的函数
function fetchUser() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({ name: 'Alice', age: 30 });
        }, 1000);
    });
}

// 使用 async 函数包裹 await
async function getUser() {
    try {
        const user = await fetchUser();
        console.log(user); // 输出：{ name: 'Alice', age: 30 }
    } catch (error) {
        console.error('Error:', error);
    }
}

// 调用 async 函数
getUser();

解释：

fetchUser 是一个返回 Promise 的函数，模拟了一个异步操作（例如从网络获取数据）。
getUser 是一个 async 函数，在其内部使用了 await 来等待 fetchUser() 的完成。当 fetchUser() 返回结果后，该结果会被赋值给变量 user。
使用 try...catch 语句来捕捉可能的错误，确保程序在遇到问题时不会崩溃。

三、执行流程解析

理解 await 的执行流程对于正确使用它非常重要。以下是 await 在函数中执行的大致步骤：

暂停执行： 当函数遇到 await 关键字时，会暂停当前函数的执行，并返回一个 Promise 给调用者。
等待完成： 暂停期间，JavaScript 引擎会继续执行其他任务，直到被等待的异步操作（如网络请求）完成。
恢复执行： 当被等待的操作完成后，await 会获取其返回值，并将其赋给变量，然后继续执行函数中的后续代码。

示例：

async function execute() {
    console.log('Start');
    const result = await fetchUser();
    console.log('Result:', result);
    console.log('End');
}

execute();

输出结果：

Start
// 等待 1 秒钟...
Result: { name: 'Alice', age: 30 }
End

解释：

execute() 函数首先打印出“Start”。
遇到 await fetchUser() 后，函数暂停执行，等待 fetchUser() 的完成。
1 秒钟后，fetchUser() 返回结果，函数继续执行，打印出结果和“End”。

四、处理多个异步操作

在实际开发中，常常需要同时执行多个异步操作。这时，可以使用 Promise.all() 方法来并行等待多个 Promise 的完成。

示例代码：

async function fetchAllData() {
    try {
        const [user, posts] = await Promise.all([
            fetchUser(),
            fetchPosts()
        ]);
        
        console.log('User:', user);
        console.log('Posts:', posts);
    } catch (error) {
        console.error('Error:', error);
    }
}

// 假设 fetchPosts 是另一个返回Promise的函数
function fetchPosts() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve([
                { id: 1, title: 'Hello World' },
                { id: 2, title: 'Welcome to JS' }
            ]);
        }, 500);
    });
}

fetchAllData();

解释：

Promise.all() 接受一个包含多个 Promise 的数组，并返回一个新的 Promise。
当所有 Promise 都完成后，新的 Promise 才会完成，并返回一个包含所有结果的数组。
使用数组解构的方式，将每个 Promise 的结果分别赋值给变量 user 和 posts。

五、循环中使用 await

在某些情况下，需要在一个循环中依次等待多个异步操作。这时可以使用 for...of 循环配合 await 来实现按顺序执行。

示例代码：

async function processItems() {
    const items = [1, 2, 3];
    
    for (const item of items) {
        await processData(item);
    }
}

function processData(id) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('Processed:', id);
            resolve();
        }, 500);
    });
}

processItems();

输出结果：

Processed: 1
Processed: 2
Processed: 3

解释：

processItems() 函数定义了一个包含三个元素的数组 items。
使用 for...of 循环依次处理每个元素，每次调用 processData(item) 并等待其完成（通过 await）。
每次异步操作完成后，才会继续处理下一个元素。

六、注意事项与最佳实践

避免在顶级作用域中使用 await：
- 如果在全局作用域或模块顶层直接使用 await，会导致程序崩溃。因此，必须将 await 放置在 async 函数内部。
正确处理错误：
- 异步操作可能会失败，因此需要始终结合 try...catch 语句来捕捉和处理可能的错误。
不要滥用 async/await：
- 只有当函数确实包含异步操作时，才应该使用 async 和 await。过度使用会导致代码复杂性增加，反而影响可读性。
保持代码简洁：
- 尽量避免在单个 async 函数中执行过多的逻辑。将复杂的任务拆分成多个小函数，提高代码的可维护性和复用性。