TypeScript await等待|极客教程

TypeScript await等待

在 TypeScript 中，我们经常会用到 await 关键字来等待异步操作的结果。await 只能在异步函数中使用，它会暂停异步函数的执行，直到一个 Promise 解析为它的最终值。在本文中，我们将详细解释 await 的使用以及一些注意事项。

什么是`await`

await 是 ES2017（ES8）中引入的一个关键字，用于等待异步操作的解决或拒绝。当遇到 await 时，JavaScript 引擎会暂停异步函数的执行，直到 await 后面的 Promise 对象状态变为 resolved 或 rejected。在 await 后的表达式会被计算，并且返回 resolved Promise 的值。

使用`await`

要使用 await，我们首先需要定义一个异步函数。异步函数是一种特殊的函数，在函数体内可以使用 await 关键字，以等待 Promise 的结果。

下面是一个简单的示例，我们定义了一个异步函数 getData 来模拟异步操作（比如从服务器获取数据）：

async function getData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data received");
        }, 2000);
    });
}

async function processData() {
    console.log("Start processing data");
    const result = await getData();
    console.log("Received data:", result);
    console.log("Data processed");
}

processData();

在上面的示例中，我们定义了异步函数 getData 来模拟异步操作。在另一个异步函数 processData 中，我们使用 await 关键字来等待 getData 函数的结果。当 getData 函数的 Promise 对象被 resolved 时，await 后面的表达式将被计算并返回 resolved Promise 的值。

`await`的错误处理

在使用 await 时，我们通常需要处理异步操作可能出现的错误。异步函数可以使用 try...catch 语句捕获 await 异步操作的错误。

让我们修改上面的示例，添加错误处理：

async function getData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true;
            if (success) {
                resolve("Data received");
            } else {
                reject(new Error("Failed to get data"));
            }
        }, 2000);
    });
}

async function processData() {
    console.log("Start processing data");
    try {
        const result = await getData();
        console.log("Received data:", result);
        console.log("Data processed");
    } catch (error) {
        console.error("Error:", error.message);
    }
}

processData();

在上面的修改后的示例中，我们在 getData 函数内添加了一个 success 变量来模拟异步操作是否成功。如果失败，则会触发 Promise 的 reject 方法，进入 try catch 块的 catch 分支。

`await`和`Promise.all`

有时候，我们需要等待多个异步操作同时完成，这时可以使用 Promise.all 方法结合 await 来实现。

让我们看一个示例，假设我们有两个异步操作 getData1 和 getData2：

async function getData1() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data 1 received");
        }, 2000);
    });
}

async function getData2() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Data 2 received");
        }, 3000);
    });
}

async function processData() {
    console.log("Start processing data");

    const [result1, result2] = await Promise.all([getData1(), getData2()]);

    console.log("Received data 1:", result1);
    console.log("Received data 2:", result2);
    console.log("Data processed");
}

processData();

在上面的示例中，我们使用 Promise.all 方法来等待 getData1 和 getData2 两个异步操作同时完成。然后将它们的结果解构赋值给 result1 和 result2。这样可以等待两个异步操作都完成后再继续执行后续操作。