如何通过 yield和Generate 函数 实现 多个未知个数的异步请求实现顺序调用

前文

需求:由于一次请求多个图片，服务器会有压力，所以采取分批多次请求，但需要实现顺序调用

解决方法

原本我想到是用Promise来解决这个回调地狱的问题，但我发现，多次请求的次数不是固定的，因为每次请求的图片数量不是固定的
后来通过百度了解到 生成器Generate和yield 也可以解决此类问题，于是参考一些blog后，解决了。

参考文章

链接: Generator 函数的含义与用法
链接: Javascript中如何让多个异步按顺序执行

正文

由于需要创建多个function来分步执行，我采用循环赋值匿名函数的方式，并保存在对象中

// 创建多个分步函数
let tempArr=[1,2,3,4]
let funcList = tempArr.map((e, index) => {
return {
["func-" + index]: (data) => {
setTimeout(() => {
console.log("func-" + index);
task.next();
}, 1000);
},
};
});

然后创建生成器Generate函数

//创建生成器Generate函数,并立即执行下一步
function* main() {
for (let _index = 0; _index < tempArr.length; _index++) {
const element = tempArr[_index];
yield funcList[_index]["func-" + _index]();
}
}
const task = main();
task.next();

这样不管分多少次调用接口，都能按顺序执行。

最后

以上就是苗条小海豚为你收集整理的如何通过 yield和Generate 函数 实现 多个未知个数的异步请求实现顺序调用的全部内容，希望文章能够帮你解决如何通过 yield和Generate 函数 实现 多个未知个数的异步请求实现顺序调用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。