29 异步编程与Promise ⏳之Promise的使用

在前一章中，我们深入探讨了 TypeScript 与 JavaScript 的关系，并讨论了使用 JavaScript 库的最佳实践。接下来，我们将进入异步编程的领域，特别关注 Promise 的使用。了解 Promise 是理解现代 JavaScript 异步编程的关键，它为我们处理异步操作提供了一种清晰而优雅的方式。

什么是 Promise？

Promise 是一种对象，用于表示一个异步操作的最终完成（或失败）及其结果值。简单来说，Promise 代表了一个可能尚未完成的操作的结果。Promise 有三种状态：

1. Pending（待定）: 初始状态，既不是成功，也不是失败。
2. Fulfilled（已兑现）: 操作成功完成。
3. Rejected（已拒绝）: 操作失败。

Promise 的基本用法

下面是一个简单的 Promise 使用示例：

function fetchData(url: string): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            // 模拟异步操作
            const success = Math.random() > 0.5; // 随机决定成功或失败
            if (success) {
                resolve(`数据从 ${url} 获取成功！`);
            } else {
                reject(`数据从 ${url} 获取失败！`);
            }
        }, 1000);
    });
}

// 使用 Promise
fetchData("https://api.example.com/data")
    .then(result => {
        console.log(result); // 处理成功的结果
    })
    .catch(error => {
        console.error(error); // 处理失败的结果
    });

在上面的代码中，fetchData 函数返回一个 Promise。我们使用 setTimeout 模拟异步操作，并根据一个随机值决定是调用 resolve 还是 reject 方法。

Promise 的链式调用

Promise 支持链式调用。这意味着我们可以连续调用 then 方法来处理多个异步操作。以下是一个例子，演示如何使用链式调用来处理多个 Promise：

fetchData("https://api.example.com/data")
    .then(result => {
        console.log(result);
        return fetchData("https://api.example.com/other-data"); // 返回下一个 Promise
    })
    .then(otherResult => {
        console.log(otherResult);
    })
    .catch(error => {
        console.error(error);
    });

通过在 then 方法中返回下一个 Promise，我们可以确保这些异步操作按照我们设定的顺序执行。

Promise.all 和 Promise.race

当我们需要同时处理多个 Promise 时，可以使用 Promise.all 和 Promise.race。

Promise.all

Promise.all 接收一个 Promise 数组，并返回一个新的 Promise。只有当所有的 Promise 都成功时，这个新的 Promise 才会成功：

Promise.all([
    fetchData("https://api.example.com/data"),
    fetchData("https://api.example.com/other-data")
])
.then(results => {
    console.log("所有请求成功：", results);
})
.catch(error => {
    console.error("有一个请求失败：", error);
});

如果其中有一个 Promise 失败，那么 Promise.all 将立即失败并返回那个错误。

Promise.race

Promise.race 也是接收一个 Promise 数组，但它会返回一个新的 Promise，一旦数组中的任意 Promise 变为 Fulfilled 或 Rejected，就立即解锁：

Promise.race([
    fetchData("https://api.example.com/data"),
    fetchData("https://api.example.com/other-data")
])
.then(result => {
    console.log("第一个成功的请求：", result);
})
.catch(error => {
    console.error("第一个失败的请求：", error);
});

在这个例子中，Promise.race 将返回第一个完成的 Promise，无论是成功还是失败。

处理 Promise 返回类型

在 TypeScript 中，处理 Promise 的返回类型是非常重要的。我们可以明确指定 Promise 的返回类型，这样在使用时可以获得更好的类型支持。

function fetchNumber(): Promise<number> {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(42); // 返回一个数字
        }, 1000);
    });
}

// 使用
fetchNumber().then(num => {
    console.log("获取的数字是：", num);
});

在这个例子中，fetchNumber 函数明确指定返回一个 Promise<number>，这样调用时 TypeScript 就会检查类型，避免类型错误。

总结

在本章中，我们探讨了 Promise 的基本概念和用法，包括如何创建和处理 Promise，链式调用的实现，以及如何使用 Promise.all 和 Promise.race 方法。同时，我们也学习了如何在 TypeScript 中有效地管理 Promise 的类型。

了解 Promise 为我们后续学习 async/await 的内容打下了坚实的基础。在下一章中，我们将进一步探索 async/await 的用法，它可以使我们编写异步代码时更加简洁和容易理解。