面试题：JavaScript 异步迭代器与 Promise 的复杂交互

Question

假设你有一个异步函数 `fetchData`，它返回一个 Promise，该 Promise 解决后返回一个包含多个数据项的数组。要求使用异步迭代器和 for - await - of 循环对数组中的每个数据项进行一些异步处理（例如，调用另一个异步函数 `processItem` 处理每个数据项），并最终返回所有处理后的结果。请编写完整的 JavaScript 代码实现此功能，并解释代码中每个部分的作用。

Answer 1

async function fetchData() {
    // 模拟异步获取数据，返回一个包含数据项的数组
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([1, 2, 3]);
        }, 1000);
    });
}

async function processItem(item) {
    // 模拟异步处理数据项
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(item * 2);
        }, 1000);
    });
}

async function main() {
    const data = await fetchData();
    const results = [];
    for await (const item of data) {
        const processedItem = await processItem(item);
        results.push(processedItem);
    }
    return results;
}

main().then((finalResults) => {
    console.log(finalResults);
});

代码解释

1. fetchData 函数：
   • 这是一个异步函数，使用 Promise 模拟异步获取数据。
   • setTimeout 模拟了异步操作，1 秒后解决 Promise 并返回一个包含数据项的数组 [1, 2, 3]。
2. processItem 函数：
   • 这也是一个异步函数，使用 Promise 模拟对单个数据项的异步处理。
   • setTimeout 模拟了异步操作，1 秒后解决 Promise 并返回处理后的数据项（数据项乘以 2）。
3. main 函数：
   • 使用 await 等待 fetchData 函数解决，获取到数据数组并赋值给 data。
   • 创建一个空数组 results 用于存储处理后的结果。
   • 使用 for - await - of 循环遍历 data 数组中的每个数据项。
   • 在循环内部，使用 await 等待 processItem 函数解决，处理当前数据项，并将处理后的结果 processedItem 存入 results 数组。
   • 最后返回 results 数组。
4. main().then((finalResults) => {...})：
   • 调用 main 函数，并在 Promise 解决后打印最终处理后的结果数组 finalResults。