面试题：TypeScript 异步编程之 Promise 链

假设 fetchData 返回的数据是一个数组，以下是示例代码：

function fetchData(): Promise<number[]> {
    // 模拟异步获取数据
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([1, 2, 3, 4, 5]);
        }, 1000);
    });
}

fetchData()
   .then((data) => {
        // 数据转换：将数组中的每个元素翻倍
        return data.map((num) => num * 2);
    })
   .then((transformedData) => {
        // 过滤数据：只保留大于 5 的元素
        return transformedData.filter((num) => num > 5);
    })
   .then((filteredData) => {
        // 最终处理：打印过滤后的数据
        console.log(filteredData);
    })
   .catch((error) => {
        // 捕获并处理 Promise 链中的错误
        console.error('发生错误:', error);
    });

fetchData()：
- 作用：调用 fetchData 函数，该函数返回一个 Promise，模拟异步获取数据。
.then((data) => {... })：
- 作用：当 fetchData 的 Promise 被解析（resolved）时，会执行这个 then 回调。在回调中，data 就是 fetchData 解析后返回的数据。这里使用 map 方法对数组中的每个元素进行转换，将每个元素翻倍。map 方法会返回一个新数组，该数组会作为下一个 then 回调的参数。
.then((transformedData) => {... })：
- 作用：接收上一个 then 回调返回的转换后的数据 transformedData。使用 filter 方法对数据进行过滤，只保留大于 5 的元素。filter 方法同样返回一个新数组，作为下一个 then 回调的参数。
.then((filteredData) => {... })：
- 作用：接收过滤后的数据 filteredData，在这里对数据进行最终的处理，例如打印数据。这是 Promise 链的最后一步（如果没有更多的 then 回调）。
.catch((error) => {... })：
- 作用：捕获 Promise 链中任何一个环节抛出的错误。如果 fetchData 函数拒绝（rejected）了 Promise，或者在任何一个 then 回调中抛出了错误，都会进入这个 catch 回调进行错误处理。这里简单地将错误信息打印到控制台。

面试题：TypeScript 异步编程之 Promise 链

知识考点

面试题答案