30 异步编程与Promise ⏳之async/await的介绍

在上一篇中，我们详细探讨了Promise的使用，理解了如何通过这一个强大的工具来处理异步操作。而在这一章中，我们要进一步学习async/await，这个语法糖使得异步代码看起来更像同步代码，从而更清晰易懂。在深入之前，让我们先了解一下async/await的基础概念与用法。

什么是async/await？

async/await是基于Promise构建的，允许你编写看似同步的异步代码。它为我们提供了一个清晰的语法，使得异步操作能够更易于理解和维护。

• async关键字用于定义一个函数，该函数会隐式返回一个Promise。
• await关键字只能在async函数内部使用，它会暂停函数的执行，等待Promise解析。

通过将异步操作用await等待，我们不再需要使用链式调用（如.then()），这使得代码的可读性显著提高。

基本用法

下面是一个使用async/await的简单例子：

// 异步函数返回一个 Promise
function mockFetchData(): Promise<string> {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("数据获取成功");
        }, 2000);
    });
}

// 使用 async/await 的异步函数
async function fetchData() {
    console.log("开始获取数据...");
    const result = await mockFetchData(); // 等待 Promise 解析
    console.log(result); // 数据获取成功
}

fetchData();

在这个例子中：

1. mockFetchData函数模拟了一个异步数据获取的过程。
2. fetchData函数标记为async，在其中，我们使用await来等待mockFetchData的结果。

当调用fetchData时，控制台会首先输出“开始获取数据…”，然后在2秒后，输出“数据获取成功”。

错误处理

尽管我们将在下一篇中专门讨论错误处理，但在这里需要简单提及async/await中的错误处理方式。对于await的调用，我们可以使用try...catch语句块来捕获Promise被拒绝时可能产生的错误。

修改上面的例子来模拟错误处理：

async function fetchDataWithErrorHandling() {
    try {
        console.log("开始获取数据...");
        const result = await mockFetchData(); // 假设此处有潜在错误
        console.log(result);
    } catch (error) {
        console.error("发生错误:", error);
    }
}

fetchDataWithErrorHandling();

这里假设mockFetchData可能抛出一个错误。使用try...catch可以方便地捕获并处理错误，使得我们的代码更加稳健。

处理多个异步操作

async/await也可以用于处理多个异步操作。可以使用Promise.all()来并行执行多个Promise，并在所有操作完成后再处理结果。这里是一个例子：

function mockFetchData1(): Promise<string> {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("数据1获取成功");
        }, 1000);
    });
}

function mockFetchData2(): Promise<string> {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve("数据2获取成功");
        }, 2000);
    });
}

async function fetchMultipleData() {
    try {
        console.log("开始同时获取多个数据...");
        const [result1, result2] = await Promise.all([mockFetchData1(), mockFetchData2()]);
        console.log(result1);
        console.log(result2);
    } catch (error) {
        console.error("发生错误:", error);
    }
}

fetchMultipleData();

在这个例子中，我们同时发起了两个异步请求。调用Promise.all([mockFetchData1(), mockFetchData2()])会保持两个请求的并行性，得到两个结果后再继续执行后续代码。

总结

在本章中，我们学习了async/await的基本用法，使得异步编程变得更加直观。通过将其与错误处理（try...catch）结合，我们能够更好地管理异步代码的执行流程。随之而来的，我们也看到了如何处理多个异步操作，使得代码更具效率与表现力。

在下一篇中，我们将深入讨论async/await中的错误处理，确保我们的异步代码更加健壮。准备好迎接更复杂的错误管理策略吧！