深入理解 JavaScript 异步：掌握 Promise、Async/Await 与 Promise.all 全指南

博文：深入理解 JavaScript 中的 Promise、await、.then() 和 Promise.all()

在现代 JavaScript 中，处理异步操作时，Promise、async/await 和 Promise.all() 是关键工具。本文将深入讲解它们的用法及实现，并结合实际例子。

1. Promise 的基本使用

Promise 是一种处理异步操作的方式。它代表一个未来可能完成或失败的操作，最终返回结果或错误。其基本结构如下：

const myPromise = new Promise((resolve, reject) => {
    // 异步操作
    setTimeout(() => {
        resolve("成功完成");
    }, 1000);
});

myPromise.then(result => {
    console.log(result); // 输出: 成功完成
}).catch(error => {
    console.error(error);
});

2. 使用 .then() 处理 Promise

.then() 是处理 Promise 成功结果的常用方法。多个 .then() 可以串联，以便顺序执行多个异步任务。例如：

doTask1()
    .then(result => doTask2(result))
    .then(newResult => doTask3(newResult))
    .then(finalResult => console.log(finalResult))
    .catch(error => console.error(error));

在这种情况下，doTask1、doTask2 和 doTask3 都是异步函数，使用 .then() 串联来确保顺序执行。

3. async/await 替代 .then()

async/await 提供了更简洁的语法来处理 Promise。使用 await，你可以像同步代码一样处理异步任务，避免了过多的 .then() 嵌套。所有 await 必须放在 async 函数中。

async function executeTasks() {
    const result = await doTask1();
    const newResult = await doTask2(result);
    const finalResult = await doTask3(newResult);
    console.log(finalResult);
}

executeTasks().catch(error => console.error(error));

这种写法让异步代码更加直观和易读。

4. Promise.all() 并行执行异步任务

如果你有多个异步任务，需要并行执行并等待它们全部完成，可以使用 Promise.all()。它接收一个 Promise 数组，并在所有 Promise 完成后返回结果。

const task1 = fetch('https://api.example.com/data1');
const task2 = fetch('https://api.example.com/data2');

Promise.all([task1, task2])
    .then(results => {
        // 两个 fetch 都完成了
        return Promise.all(results.map(result => result.json()));
    })
    .then(data => {
        console.log(data[0], data[1]); // 输出两个请求的数据
    })
    .catch(error => {
        console.error(error);
    });

使用 Promise.all() 可以让多个异步任务并行执行，大幅提高性能。

5. 结合 async/await 和 Promise.all()

Promise.all() 也可以与 await 一起使用，简化代码。结合 await，你可以实现更简洁的并行任务处理：

async function executeAllTasks() {
    const results = await Promise.all([doTask1(), doTask2(), doTask3()]);
    console.log(results); // 所有任务完成后一起输出
}

executeAllTasks().catch(error => console.error(error));

这种写法不仅简洁，还保留了并行执行的优势。

6. 实践：处理异步请求和等待全部完成

假设我们有一个循环，调用多个异步请求，并希望等它们全部完成后再执行其他操作。可以这样做：

async function insertLinksInDivs() {
    const promises = [];
    for (let i = 0; i < divs.length; i++) {
        const id = divs[i].getAttribute('data-id');
        const pinUrl = `https://example.com/pin/${id}`;
        promises.push(checkComments(pinUrl, divs[i]));
    }
    
    // 等待所有 checkComments 执行完毕
    await Promise.all(promises);
    console.log('所有异步请求完成');
}

insertLinksInDivs();

在这个例子中，Promise.all(promises) 确保所有 checkComments 请求并行执行，且所有请求完成后才继续执行后续代码。

结论

• Promise 用于处理异步任务，它有 .then() 来处理成功和 .catch() 来处理错误。
• async/await 提供了更直观的语法，使代码看起来像同步执行，但仍然是异步的。
• Promise.all() 允许多个异步任务并行执行并等待它们全部完成，非常适合处理多个独立的异步操作。

通过灵活使用 Promise、await 和 Promise.all()，你可以编写更清晰、易维护的异步代码。

希望这篇博文对你理解 JavaScript 中的异步处理有所帮助！