面试题：JavaScript可迭代对象在异步操作场景下的应用

Question

在一个JavaScript项目中，有一系列异步任务（比如多个异步API调用），这些任务返回的数据需要按顺序进行处理。请利用可迭代对象的特性设计一个解决方案，实现异步任务的有序执行和结果处理。要求使用ES6的async/await语法，详细说明可迭代对象如何与异步操作协同工作，以提高代码的可读性和可维护性。

Answer 1

// 模拟异步任务，返回Promise
function asyncTask1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Task 1 result');
        }, 1000);
    });
}

function asyncTask2() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Task 2 result');
        }, 1500);
    });
}

function asyncTask3() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Task 3 result');
        }, 2000);
    });
}

// 创建一个可迭代对象，包含所有异步任务
const taskIterable = {
    tasks: [asyncTask1, asyncTask2, asyncTask3],
    [Symbol.iterator]() {
        let index = 0;
        return {
            next: () => {
                if (index < this.tasks.length) {
                    return {
                        value: this.tasks[index++](),
                        done: false
                    };
                } else {
                    return {
                        done: true
                    };
                }
            }
        };
    }
};

// 使用async/await按顺序执行异步任务并处理结果
async function executeTasks() {
    for await (const result of taskIterable) {
        console.log(result);
    }
}

executeTasks();

可迭代对象与异步操作协同工作原理

1. 创建可迭代对象：

   • 首先创建一个对象taskIterable，它包含一个tasks数组，数组中存放所有的异步任务函数（这里是asyncTask1、asyncTask2、asyncTask3）。
   • 通过实现Symbol.iterator方法，使其成为可迭代对象。在Symbol.iterator方法内部，使用index变量来跟踪当前迭代的位置。每次调用next方法时，返回下一个异步任务的Promise对象（通过调用任务函数），直到所有任务都迭代完毕。

2. 使用for await...of循环：

   • for await...of循环是ES2018引入的语法，专门用于处理异步可迭代对象。
   • 当使用for await...of遍历taskIterable时，每次迭代都会等待前一个异步任务（Promise）完成，然后获取其结果（通过await）。这样就确保了异步任务按顺序执行，并且可以方便地处理每个任务的结果。

通过这种方式，利用可迭代对象的特性与async/await语法结合，使得异步任务的有序执行和结果处理代码更加清晰、易读，提高了代码的可读性和可维护性。