I believe that some students in the interview process, the interviewer will ask you if you can briefly describe the principle of Promise.All, xiaxiaian was also asked, so I also looked for several articles and examples on the Internet, after reading it, I also suddenly understood, I hope I can help you

Promise. All principle

Promise.all takes an array of Promise objects and calls the.then method when all Promise objects in the array are in the resolve or reject state. They execute concurrently

Read the features of Promise. all before implementing it

The promise.all () method wrappers multiple Promise instances into a single Promise object (p), taking an array of Promise objects (P1, P2,p3) as arguments. The array does not have to be all Promise objects, but it must have an Iterator interface. It calls promise.resolve to convert it to a Promise object before processing it.

The state of the Promise object (p) generated with promise.all () is determined by the Promise objects (p1,p2,p3) in the array.

  • If all Promise objects (P1, P2,p3) are fullfilled, the generated Promise object (p) will also be fullfilled. The results of the three Promise objects (P1, P2,p3) are returned as an array to the callback passed to p.
  • If p1, P2,p3 has a Promise object in the rejected state,p will also be in the rejected state, and the return value of the first rejected object will be passed to the p callback function.

Promise objects generated by promise.all () also have a catch method to catch error handling, but if the Promise object in the array becomes rejected and the object defines a catch method, The rejected object executes its catch method and returns a Promise object with the fullfilled state. Promise.all() generates an object that accepts the Promise object and does not return the Rejected state

Version of a

function PromiseAll(arr) {
    //PromiseAll returns a promise object
    return new Promise((resolve, reject) = > {
        //PromiseAll must be an array
        if (!Array.isArray(arr)) {
            return reject(new TypeError('arr must be an array.'));
        }
        let resArr = [];
        for (let i in arr) {
            (function(i) {
                Promise.resolve(arr[i]).then(res= > {
                    resArr.push(res);
                    // Return resolve only if all are successful
                    if (i == arr.length - 1) {
                        return resolve(resArr);
                    }
                }, err => {
		    // Throw anything wrong
                    return reject(err)
                }).catch(err= > {
                    console.log(err)
                })
            })(i)
        }
    })
}

/ / test
const pro1 = new Promise((res,rej) = > {
  setTimeout((a)= > {
    res('1')},1000)})const pro2 = new Promise((res,rej) = > {
  setTimeout((a)= > {
    res('2')},2000)})const pro3 = new Promise((res,rej) = > {
  setTimeout((a)= > {
    res('3')},3000)})const proAll = PromiseAll([pro1,pro2,pro3])
.then(res= > 
  console.log(res) // Print after 3 seconds ["1", "2", "3"]
)
.catch((e) = > {
  console.log(e)
})
Copy the code

Version 2

function  PromiseAll(promiseArrs) {
  return new Promise((resolve, reject) = > { // Return a new Promise
    let arr = []; // Define an empty array to hold the results
    let i = 0;
    function handleData(index, data) { // Handle the data function
        arr[index] = data;
        i++;
        if (i === promiseArrs.length) { // when I is equal to the length of the array passed
            resolve(arr); // Execute resolve and put the result in}}for (let i = 0; i < promiseArrs.length; i++) { // Loop through the array
        promiseArrs[i].then((data) = > {
            handleData(i, data); // Pass the result and index into handleData
        }, reject)
    }
 })
}

/ / test
const pro1 = new Promise((res,rej) = > {
  setTimeout((a)= > {
    res('1')},1000)})const pro2 = new Promise((res,rej) = > {
  setTimeout((a)= > {
    res('2')},2000)})const pro3 = new Promise((res,rej) = > {
  setTimeout((a)= > {
    res('3')},3000)})const proAll = PromiseAll([pro1,pro2,pro3])
.then(res= > 
 console.log(res) // Print after 3 seconds ["1", "2", "3"]
)
.catch((e) = > {
 console.log(e)
})
Copy the code

Version 3

function  PromiseAll(promiseArray) {
  return new Promise(function(resolve,reject){
    // Determine the parameter type
    if(!Array.isArray(promiseArray)){
        return reject(new TypeError('arguments muse be an array'))}var counter = 0,
        promiseNum = promiseArray.length,
        resolvedArray = new Array(promiseNum);
    for(var i = 0; i < promiseNum; i++){
        (function(i){
            Promise.resolve(promiseArray[i]).then(function(value){
                counter++;
                resolvedArray[i] = value;
                if(counter == promiseNum){
                    return resolve(resolvedArray)
                }
            },function(reason){
                return reject(reason)
            })
        })(i)
    }
 })
}

/ / test
const pro1 = new Promise((res,rej) = > {
  setTimeout((a)= > {
    res('1')},1000)})const pro2 = new Promise((res,rej) = > {
  setTimeout((a)= > {
    res('2')},2000)})const pro3 = new Promise((res,rej) = > {
  setTimeout((a)= > {
    res('3')},3000)})const proAll = PromiseAll([pro1,pro2,pro3])
.then(res= > 
 console.log(res) // Print after 3 seconds ["1", "2", "3"]
)
.catch((e) = > {
 console.log(e)
})
Copy the code

conclusion

No matter how the version changes, as long as promise. all several features of the interpretation can be

  1. Promise.all() takes an Array argument
  2. Only when all promises in the array change to resolve
  3. Return a new Promise instance
  4. As long as there is a failure, the state becomes rejected

More on Promise.all

To manually implement a promise.all () implementation of the promise.all method

About me