preface

A few days ago, I read zz_Jesse’s guide to uploading files for beginners, from small images to large files, and learned a lot about uploading. However, when uploading a large file fragment, the author mentioned that the fragment upload needs to do concurrent limitation processing, but his demo did not do it. With the mentality of learning, I went online to learn some.

Promise.all()

The promise.all () method is used to wrap multiple Promise instances into a new Promise instance.

const p = Promise.all([p1, p2, p3]);
Copy the code

In the code above, the promise.all () method takes an array of arguments. P1, p2, and p3 are all Promise instances. If they are not, the Promise. In addition, the promise.all () method can take arguments that are not arrays, but must have an Iterator interface and return each member as a Promise instance. The state of P is determined by P1, P2 and P3, which can be divided into two cases.

  • Only the states p1, P2, p3 all becomefulfilledThe state of P will change tofulfilled, the return values of P1, P2 and p3 form an array and are passed to the callback function of P.
  • As long as one of p1, P2, p3 isrejectedThe state of p becomesrejectedAt this time, the first to berejectThe return value of the instance of p is passed to p’s callback function.

Code

  const requestsLimit = (list, limit, asyncHandle) = > {
    return new Promise(resolve= > {
      let _limit = limit;
      let recordList = []; // Log asynchronous operations
      let index = 0;
      let listCopy = [].concat(list);
      let asyncList = []; // All concurrent asynchronous operations in progress


      const asyncFunc = (a)= > {
        while(_limit--) {
          const data = listCopy.shift()
          if (data) asyncList.push(asyncHandle(data, index++)); 
        }
        
        Promise.all(asyncList).then(response= > {
          // Listen and record the results of each request
          recordList = recordList.concat(response.filter(item= > item));


          if(listCopy.length ! = =0) {
            _limit = limit;
            asyncList = [];
            asyncFunc() // The recursion continues while the array is iterated over
          } else {
            // After all concurrent asynchronous operations are completed, the concurrency control iteration is complete and the result is returned
            resolve(recordList)
          }
        })
      }


      asyncFunc()
    })
  }

Copy the code

Demo

  var dataLists = [1.2.3.4.5.6.7.8];
  
  requestsLimit(dataLists, 3, (item, index) => {
    return new Promise(resolve= > {
      // Perform asynchronous processing
      setTimeout((a)= > {
        // Filter the results of asynchronous processing
        console.log(index)
        if (item % 2= = =0) resolve({ item, index })
        else resolve()
      }, Math.random() * 5000)}); }).then(response= > {
    console.log('finish', response)
  })
Copy the code

console.log()

portal

  • Ruan Yifeng — Getting started with ECMAScript 6 – Promise
  • Personal blog — Cat eleven cartons