MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

JavaScript生成器在异步编程中的使用

2021-03-217.5k 阅读

JavaScript 生成器基础

在深入探讨 JavaScript 生成器在异步编程中的应用之前，我们先来全面了解一下生成器本身的基本概念和特性。

生成器函数的定义

生成器函数是一种特殊的函数，它的定义方式与普通函数有所不同。普通函数使用 function 关键字定义，而生成器函数使用 function* 来定义。例如：

function* myGenerator() {
    yield 1;
    yield 2;
    yield 3;
}

这里的 myGenerator 就是一个生成器函数。注意函数名后面的 * 符号，它标志着这是一个生成器函数。

yield 关键字

yield 关键字是生成器函数的核心特性之一。当生成器函数执行到 yield 语句时，函数会暂停执行，并返回 yield 后面的值。例如在上面的 myGenerator 函数中，第一次调用 next() 方法（后面会详细介绍）时，函数执行到 yield 1，就会暂停并返回 { value: 1, done: false }。其中 value 就是 yield 后面的值，done 表示生成器是否已经完全结束。

生成器对象

调用生成器函数并不会立即执行函数体，而是返回一个生成器对象。我们可以通过这个生成器对象来控制生成器函数的执行。例如：

let gen = myGenerator();
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());

每次调用 gen.next() 时，生成器函数会从上次暂停的地方继续执行，直到遇到下一个 yield 或者函数结束。当函数结束时，done 会变为 true，例如最后一次 gen.next() 返回 { value: undefined, done: true }。

生成器的可迭代性

生成器对象是可迭代的，这意味着我们可以使用 for...of 循环来遍历它。例如：

function* myGenerator() {
    yield 1;
    yield 2;
    yield 3;
}
for (let value of myGenerator()) {
    console.log(value);
}

上述代码会依次输出 1、2、3。这是因为 for...of 循环会自动调用生成器对象的 next() 方法，直到 done 为 true。

异步编程概述

在现代 JavaScript 开发中，异步编程是至关重要的一部分。随着网络请求、文件操作等 I/O 操作的频繁使用，理解和掌握异步编程变得不可或缺。

异步操作的需求

JavaScript 是单线程语言，这意味着它在同一时间只能执行一个任务。如果有一个长时间运行的同步任务，比如一个耗时的网络请求或者文件读取，整个程序就会被阻塞，用户界面也会变得无响应。而异步操作允许 JavaScript 在等待某些操作完成（比如网络响应）的同时，继续执行其他代码，从而提高程序的响应性和性能。

回调函数

回调函数是 JavaScript 中最早用于处理异步操作的方式。例如，setTimeout 函数就是一个典型的使用回调函数来实现异步操作的例子：

setTimeout(() => {
    console.log('This is a callback function');
}, 1000);

这里的箭头函数就是回调函数，它会在 setTimeout 设置的 1 秒延迟后执行。然而，当有多个异步操作相互依赖时，回调函数会导致代码变得难以阅读和维护，这就是所谓的 “回调地狱”。例如：

asyncOperation1((result1) => {
    asyncOperation2(result1, (result2) => {
        asyncOperation3(result2, (result3) => {
            asyncOperation4(result3, (result4) => {
                // 处理最终结果
            });
        });
    });
});

这种层层嵌套的代码结构使得代码的逻辑变得复杂，调试也更加困难。

Promise

为了解决回调地狱的问题，ES6 引入了 Promise。Promise 是一个代表异步操作最终完成（或失败）及其结果值的对象。它有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。例如：

function asyncOperation() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Operation completed successfully');
        }, 1000);
    });
}
asyncOperation()
   .then((result) => {
        console.log(result);
    })
   .catch((error) => {
        console.error(error);
    });

Promise 通过链式调用的方式使得异步代码更加可读。多个异步操作可以通过 .then() 方法依次连接，而错误处理可以通过 .catch() 方法统一处理。例如：

asyncOperation1()
   .then((result1) => asyncOperation2(result1))
   .then((result2) => asyncOperation3(result2))
   .then((result3) => asyncOperation4(result3))
   .then((finalResult) => {
        console.log(finalResult);
    })
   .catch((error) => {
        console.error(error);
    });

虽然 Promise 极大地改善了异步代码的可读性，但在处理复杂的异步流程控制时，仍然存在一些不足之处。

async/await

async/await 是 ES2017 引入的异步编程语法糖，它基于 Promise 构建，使得异步代码看起来更像同步代码。async 用于定义一个异步函数，该函数始终返回一个 Promise。await 只能在 async 函数内部使用，它会暂停异步函数的执行，直到 Promise 被解决（resolved 或 rejected）。例如：

async function main() {
    try {
        let result = await asyncOperation();
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}
main();

这里的 await asyncOperation() 会暂停 main 函数的执行，直到 asyncOperation 返回的 Promise 被解决。如果 Promise 被 resolved，await 表达式的值就是 resolved 的值；如果 Promise 被 rejected，await 会抛出错误，我们可以通过 try...catch 块来捕获并处理这个错误。

生成器在异步编程中的应用

了解了生成器和异步编程的基础知识后，我们来看看生成器是如何在异步编程中发挥作用的。

利用生成器模拟异步操作

我们可以利用生成器函数的暂停和恢复特性来模拟异步操作。例如，假设我们有一个简单的异步任务，需要在一段时间后返回一个值：

function* asyncTask() {
    yield new Promise((resolve) => {
        setTimeout(() => {
            resolve('Task completed');
        }, 1000);
    });
}
let task = asyncTask();
let promise = task.next().value;
promise.then((result) => {
    console.log(result);
});

在这个例子中，生成器函数 asyncTask 暂停在 yield 语句处，返回一个 Promise。我们通过 task.next().value 获取这个 Promise，然后使用 .then() 方法来处理 Promise 解决后的结果。这样，我们就利用生成器模拟了一个异步操作。

自动执行生成器以处理异步流程

手动调用 next() 方法来处理生成器的异步操作比较繁琐，我们可以编写一个自动执行生成器的函数。这个函数会不断调用 next() 方法，直到生成器结束。例如：

function runGenerator(gen) {
    let it = gen();
    function handleResult(result) {
        if (result.done) {
            return result.value;
        }
        return result.value.then((data) => {
            return handleResult(it.next(data));
        });
    }
    return handleResult(it.next());
}
function* asyncTasks() {
    let result1 = yield new Promise((resolve) => {
        setTimeout(() => {
            resolve('First task completed');
        }, 1000);
    });
    console.log(result1);
    let result2 = yield new Promise((resolve) => {
        setTimeout(() => {
            resolve('Second task completed');
        }, 1000);
    });
    console.log(result2);
    return 'All tasks completed';
}
runGenerator(asyncTasks()).then((finalResult) => {
    console.log(finalResult);
});

在这个例子中，runGenerator 函数接受一个生成器函数作为参数。它首先创建生成器实例 it，然后通过 handleResult 函数来递归处理生成器的 next() 方法返回的结果。如果 result.done 为 true，说明生成器已经结束，直接返回 result.value；否则，获取 result.value（一个 Promise），并在 Promise 解决后递归调用 handleResult(it.next(data))。这样，我们就可以自动执行包含多个异步操作的生成器函数。

生成器与 Promise 的结合

生成器与 Promise 结合可以更灵活地处理异步操作。我们可以将 Promise 作为 yield 的值返回，然后在外部处理 Promise 的结果。例如：

function asyncFunction() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('Async operation result');
        }, 1000);
    });
}
function* generator() {
    let result = yield asyncFunction();
    console.log(result);
    return 'Final result';
}
let gen = generator();
let promise = gen.next().value;
promise.then((data) => {
    let finalResult = gen.next(data).value;
    console.log(finalResult);
});

在这个例子中，generator 函数 yield 一个 asyncFunction 返回的 Promise。通过 gen.next().value 获取这个 Promise，并使用 .then() 方法处理 Promise 解决后的结果。然后将这个结果作为参数传递给 gen.next(data)，继续执行生成器函数，最终获取生成器函数返回的最终结果。

生成器在异步迭代中的应用

生成器的可迭代性在异步迭代中也有很好的应用。我们可以创建一个异步迭代器，通过生成器函数来实现。例如，假设我们有一个异步获取数据列表的函数，每次获取一部分数据：

function asyncFetchData(page) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([`Data for page ${page}`, `More data for page ${page}`]);
        }, 1000);
    });
}
function* asyncDataGenerator() {
    let page = 1;
    while (true) {
        let data = yield asyncFetchData(page);
        for (let item of data) {
            console.log(item);
        }
        page++;
    }
}
let gen = asyncDataGenerator();
let promise = gen.next().value;
function handleAsyncData() {
    promise.then((data) => {
        let newPromise = gen.next(data).value;
        if (newPromise) {
            newPromise.then(() => {
                handleAsyncData();
            });
        }
    });
}
handleAsyncData();

在这个例子中，asyncDataGenerator 是一个生成器函数，它通过 yield asyncFetchData(page) 异步获取数据。每次获取到数据后，通过 for...of 循环处理数据。handleAsyncData 函数负责不断调用生成器的 next() 方法，以实现异步迭代数据的功能。

生成器在异步编程中的优势与局限

优势

  1. 代码可读性：生成器可以将异步操作以一种类似同步的方式组织起来，使得代码逻辑更加清晰。例如在 asyncTasks 生成器函数中，多个异步任务依次排列，就像同步代码一样，大大提高了代码的可读性。
  2. 灵活的控制流：生成器提供了灵活的暂停和恢复机制，我们可以根据需要精确控制异步操作的执行顺序和时机。比如在 asyncDataGenerator 中，通过 yield 暂停获取数据，然后在合适的时候继续获取下一页数据。
  3. 错误处理：结合 Promise 或者 try...catch 块，生成器可以有效地处理异步操作中的错误。在 runGenerator 函数中，通过 .catch() 方法统一处理生成器内部异步操作抛出的错误。

局限

  1. 手动控制繁琐：虽然可以编写自动执行生成器的函数，但在一些简单场景下，手动调用 next() 方法来处理生成器的异步操作还是比较繁琐。相比之下，async/await 语法糖更加简洁直观。
  2. 兼容性：在一些较老的 JavaScript 运行环境中，对生成器的支持可能不完善。虽然可以通过 Babel 等工具进行转译，但这增加了项目的复杂性和构建成本。

与 async/await 的比较

语法简洁性

async/await 在语法上更加简洁明了，它直接基于 Promise，使用起来就像编写同步代码一样。例如：

async function main() {
    let result1 = await asyncOperation1();
    let result2 = await asyncOperation2(result1);
    let result3 = await asyncOperation3(result2);
    console.log(result3);
}

而使用生成器实现类似功能需要更多的代码，包括定义生成器函数、手动执行生成器等步骤：

function* mainGenerator() {
    let result1 = yield asyncOperation1();
    let result2 = yield asyncOperation2(result1);
    let result3 = yield asyncOperation3(result2);
    console.log(result3);
}
function runGenerator(gen) {
    let it = gen();
    function handleResult(result) {
        if (result.done) {
            return result.value;
        }
        return result.value.then((data) => {
            return handleResult(it.next(data));
        });
    }
    return handleResult(it.next());
}
runGenerator(mainGenerator());

错误处理

async/await 可以通过 try...catch 块直接捕获异步操作中的错误，代码结构清晰：

async function main() {
    try {
        let result = await asyncOperation();
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}

在生成器中，结合 Promise 的错误处理方式相对复杂一些，需要在自动执行生成器的函数中通过 .catch() 方法来捕获错误：

function runGenerator(gen) {
    let it = gen();
    function handleResult(result) {
        if (result.done) {
            return result.value;
        }
        return result.value.then((data) => {
            return handleResult(it.next(data));
        }).catch((error) => {
            console.error(error);
            return { done: true, value: undefined };
        });
    }
    return handleResult(it.next());
}

适用场景

async/await 适用于大多数异步编程场景，尤其是在处理简单到中等复杂度的异步操作时，它的简洁性和易用性使得代码开发效率更高。而生成器在一些需要更灵活控制异步操作流程的场景下更有优势，比如实现自定义的异步迭代器或者更复杂的异步状态机。

实际项目中的应用案例

处理多个异步 API 调用

在一个 Web 应用中，可能需要从多个不同的 API 获取数据，并根据这些数据进行进一步的处理。例如，我们需要从一个 API 获取用户信息，然后根据用户 ID 从另一个 API 获取用户的订单信息，最后根据订单 ID 从第三个 API 获取订单的详细内容。 使用生成器可以这样实现：

function getUserInfo() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({ id: 1, name: 'John' });
        }, 1000);
    });
}
function getOrderInfo(userId) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve([{ id: 101, userId: 1, product: 'Book' }]);
        }, 1000);
    });
}
function getOrderDetails(orderId) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({ id: 101, details: 'This is a book' });
        }, 1000);
    });
}
function* apiCalls() {
    let user = yield getUserInfo();
    let orders = yield getOrderInfo(user.id);
    let orderDetails = yield getOrderDetails(orders[0].id);
    console.log(orderDetails);
}
function runGenerator(gen) {
    let it = gen();
    function handleResult(result) {
        if (result.done) {
            return result.value;
        }
        return result.value.then((data) => {
            return handleResult(it.next(data));
        });
    }
    return handleResult(it.next());
}
runGenerator(apiCalls());

通过生成器，我们可以将这一系列异步 API 调用以一种较为清晰的方式组织起来，使得代码逻辑更加易懂。

实现异步队列

在某些情况下，我们需要按照顺序依次执行一系列异步任务，并且在前一个任务完成后才执行下一个任务，这就可以通过生成器来实现异步队列。例如：

function asyncTask1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Task 1 completed');
            resolve();
        }, 1000);
    });
}
function asyncTask2() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Task 2 completed');
            resolve();
        }, 1000);
    });
}
function asyncTask3() {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log('Task 3 completed');
            resolve();
        }, 1000);
    });
}
function* taskQueue() {
    yield asyncTask1();
    yield asyncTask2();
    yield asyncTask3();
}
function runGenerator(gen) {
    let it = gen();
    function handleResult(result) {
        if (result.done) {
            return result.value;
        }
        return result.value.then(() => {
            return handleResult(it.next());
        });
    }
    return handleResult(it.next());
}
runGenerator(taskQueue());

在这个例子中，taskQueue 生成器函数定义了一个异步任务队列，通过 yield 依次暂停和恢复每个异步任务的执行，从而实现按照顺序执行异步任务的功能。

总结

JavaScript 生成器在异步编程中提供了一种强大而灵活的方式来处理异步操作。它通过暂停和恢复函数执行的特性，结合 Promise 等异步工具，可以有效地组织和控制异步流程。虽然生成器在语法上相对复杂一些，并且手动控制较为繁琐，但在一些需要精确控制异步操作顺序和流程的场景下，它具有独特的优势。与 async/await 相比，生成器更适合于实现自定义的异步迭代器、复杂的异步状态机等功能。在实际项目中，根据具体的需求和场景选择合适的异步编程方式，可以提高代码的可读性、可维护性和性能。无论是生成器还是 async/await，都是 JavaScript 异步编程工具链中的重要组成部分，开发者需要熟练掌握并灵活运用它们来构建高效、稳定的应用程序。