在前端开发中，我们经常需要进行异步操作，比如发送网络请求、读取本地文件等等。Promise 是一种用于处理异步操作的语法，它可以让我们更加方便地进行异步编程。但是，Promise 在处理多个异步操作时，可能会出现并发控制的问题，这时候我们可以将 Promise 转换为 Generator 实现并发控制。
Promise 的并发控制问题
在使用 Promise 进行多个异步操作时，如果不进行并发控制，可能会出现一些问题。比如，我们需要从服务器获取 1000 个数据，如果一次性发起 1000 个请求，可能会导致服务器崩溃，或者占用过多的带宽资源。所以，我们需要进行并发控制，限制每次发送的请求数量，以避免出现这些问题。
Generator 的基本概念
在介绍如何将 Promise 转换为 Generator 实现并发控制之前，我们先来了解一下 Generator 的基本概念。
Generator 是一种特殊的函数，它可以暂停执行，并且可以在暂停的位置继续执行。Generator 函数使用 function* 声明，函数内部使用 yield 关键字来暂停执行。下面是一个简单的 Generator 函数示例：
// javascriptcn.com 代码示例
function* gen() {
yield 1;
yield 2;
yield 3;
}
const g = gen();
console.log(g.next()); // { value: 1, done: false }
console.log(g.next()); // { value: 2, done: false }
console.log(g.next()); // { value: 3, done: false }
console.log(g.next()); // { value: undefined, done: true }在上面的示例中，我们定义了一个 Generator 函数 gen，该函数内部有三个 yield 关键字，每次调用 g.next() 方法时，函数会从上一次暂停的位置继续执行，返回一个包含 value 和 done 两个属性的对象，其中 value 表示当前暂停位置的返回值，done 表示函数是否执行完毕。
将 Promise 转换为 Generator
有了 Generator 的基础知识，我们就可以将 Promise 转换为 Generator 实现并发控制了。下面是一个简单的示例：
// javascriptcn.com 代码示例
function* gen(urls, limit) {
const tasks = [];
let i = 0;
while (i < urls.length) {
while (tasks.length < limit && i < urls.length) {
const url = urls[i++];
const task = fetch(url).then(res => res.json());
tasks.push(task);
}
const results = yield Promise.all(tasks);
tasks.length = 0;
yield results;
}
}
const g = gen([
'https://jsonplaceholder.typicode.com/todos/1',
'https://jsonplaceholder.typicode.com/todos/2',
'https://jsonplaceholder.typicode.com/todos/3',
'https://jsonplaceholder.typicode.com/todos/4',
'https://jsonplaceholder.typicode.com/todos/5',
'https://jsonplaceholder.typicode.com/todos/6',
'https://jsonplaceholder.typicode.com/todos/7',
'https://jsonplaceholder.typicode.com/todos/8',
'https://jsonplaceholder.typicode.com/todos/9',
'https://jsonplaceholder.typicode.com/todos/10',
], 3);
(async function() {
let results = [];
while (true) {
const { value, done } = g.next(results);
if (done) break;
results = value;
console.log(results);
}
})();在上面的示例中，我们定义了一个 Generator 函数 gen，该函数接受两个参数：一个包含多个 URL 的数组 urls，和一个并发数量限制 limit。函数内部使用一个 while 循环，每次循环时，判断当前的任务数是否小于并发数量限制 limit，如果小于则发起一个新的异步请求，并将该任务添加到 tasks 数组中。当 tasks 数组长度达到 limit 或者所有任务都已经添加到 tasks 数组中时，使用 Promise.all 方法并发执行所有任务，并将结果赋值给 results 变量。然后，使用 yield 关键字将 results 变量返回给调用者。
在调用 gen 函数时，我们传入了一个包含 10 个 URL 的数组和并发数量限制为 3，然后使用一个 while 循环不断调用 g.next(results) 方法，将上一次的结果传入，直到函数执行完毕。在每次调用 g.next(results) 方法时，函数会从上一次暂停的位置继续执行，并将结果赋值给 results 变量，然后再次进入循环，直到函数执行完毕。
总结
通过将 Promise 转换为 Generator 实现并发控制，我们可以更加方便地处理多个异步操作，并避免出现并发控制的问题。在实际开发中，我们可以根据具体的需求，灵活地使用 Generator 函数来处理异步操作，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65517feed2f5e1655db3e366