请排好队，一个一个的来 --- 基于Promise.all()实现并发控制

前言

前几天看了做者 zz_jesse 的 写给新手前端的各类文件上传攻略，从小图片到大文件断点续传  ，学习了不少有关上传的知识点。但在大文件分片上传一块，做者有说起分片上传须要作并发限制处理，但他的demo并无作。抱着学习的心态，我又去网上学习了一番。。

---

Promise.all()

Promise.all() 方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.all([p1, p2, p3]);
复制代码

上面代码中， Promise.all() 方法接受一个数组做为参数，p一、p二、p3都是 Promise 实例，若是不是，就会先调用下面讲到的 Promise.resolve 方法，将参数转为 Promise 实例，再进一步处理。另外， Promise.all() 方法的参数能够不是数组，但必须具备 Iterator 接口，且返回的每一个成员都是 Promise 实例。 p的状态由p一、p二、p3决定，分红两种状况。

• 只有p一、p二、p3的状态都变成 fulfilled ，p的状态才会变成 fulfilled ，此时p一、p二、p3的返回值组成一个数组，传递给p的回调函数。
• 只要p一、p二、p3之中有一个被 rejected ，p的状态就变成 rejected ，此时第一个被 reject 的实例的返回值，会传递给p的回调函数。

Code

  const requestsLimit = (list, limit, asyncHandle) => {
    return new Promise(resolve => {
      let _limit = limit;
      let recordList = []; // 记录异步操做
      let index = 0;
      let listCopy = [].concat(list);
      let asyncList = []; // 正在进行的全部并发异步操做


      const asyncFunc = () => {
        while(_limit--) {
          const data = listCopy.shift()
          if (data) asyncList.push(asyncHandle(data, index++)); 
        }
        
        Promise.all(asyncList).then(response => {
          // 监听并记录每一次请求的结果
          recordList = recordList.concat(response.filter(item => item));


          if (listCopy.length !== 0) {
            _limit = limit;
            asyncList = [];
            asyncFunc() // 数组还未迭代完，递归继续进行迭代
          } else {
            // 全部并发异步操做都完成后，本次并发控制迭代完成，返回记录结果
            resolve(recordList)
          }
        })
      }


      asyncFunc()
    })
  }

复制代码

Demo

  var dataLists = [1,2,3,4,5,6,7,8];
  
  requestsLimit(dataLists, 3, (item, index) => {
    return new Promise(resolve => {
      // 执行异步处理
      setTimeout(() => {
        // 筛选异步处理的结果
        console.log(index)
        if (item % 2 === 0) resolve({ item, index })
        else resolve()
      }, Math.random() * 5000)  
    });
  }).then(response => {
    console.log('finish', response)
  })
复制代码

console.log()

传送门

• 阮一峰 ---   ECMAScript 6 入门 - Promise
• 我的博客 --- 猫十一の纸盒子