如何通过 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();

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