Promise class methods

This article mainly talks about the basic use of Promise class methods. As for the basic use of Promise, I won’t go into details here. I have written Promise before and realized the core logic of Promise. In fact, we usually use Promise quite a lot, but there are two new grammars (ES11, ES12 added two), so this article will briefly talk about it, and it is quite simple.

1. all 

In the Promise.all method, we can pass in an array parameter. Multiple Promises can be placed in the array. It will wait for all Promise states to be fulfilled to obtain the final result. It will resolve all the results of each Promise. Put it in an array, and the order of the results remains the same as the Promise in the array parameter we passed in (regardless of time)

const p1 = new Promise((resolve, reject) => {
  const obj = { data: '11111' }
  setTimeout(() => {
    resolve(obj)
  }, 3000)
})

const p2 = new Promise((resolve, reject) => {
  const obj = { data: '22222' }
  setTimeout(() => {
    resolve(obj)
  }, 2000)
})

const p3 = new Promise((resolve, reject) => {
  const obj = { data: '33333' }
  setTimeout(() => {
    resolve(obj)
  }, 1000)
})

Promise.all([p1, p2, p3]).then(result => {
  console.log(result)
}).catch(err => {
  console.log('err:', err)
})

 The above code will get the final result in the then method after 3s as follows:

But the all method has a flaw. When one of the Promises becomes rejected, the new Promise will immediately change to the corresponding reject state, that is, errors can only be caught in the catch, and the values ​​of other fulfilled states are Can't get it. Hence the allSettled method

2.  allSettled

allSettled is a new API added in ES11 (2020), Promise.allSettled

This method will get our final result in the then method when all Promises have results (whether they are fulfilled or rejected): 

const p1 = new Promise((resolve, reject) => {
  const obj = { data: '11111' }
  setTimeout(() => {
    resolve(obj)
  }, 3000)
})

const p2 = new Promise((resolve, reject) => { 
  const obj = { data: '22222' }
  setTimeout(() => {
    reject(obj)
  }, 2000)
})

const p3 = new Promise((resolve, reject) => {
  const obj = { data: '33333' }
  setTimeout(() => {
    resolve(obj)
  }, 1000)
})

Promise.allSettled([p1, p2, p3]).then(result => {
  console.log(result)
}).catch(err => {
  console.log('err:', err)
})

We passed in three promises, and our p2 rejected it in 2s, but we can also get the result, but the structure of the result array has changed a bit, let's see the print result: 

 We can see that the result of allSettled is an array, which stores the results of each Promise and corresponds to an object; this object contains the status state and the corresponding value

3.  race

Race means competition and running, that is, whoever has the result first will want whoever gets the result. The result obtained by this result is not an array, but the result of the fastest Promise resolve 

const p1 = new Promise((resolve, reject) => {
  const obj = { data: '11111' }
  setTimeout(() => {
    resolve(obj)
  }, 3000)
})

const p2 = new Promise((resolve, reject) => { 
  const obj = { data: '22222' }
  setTimeout(() => {
    resolve(obj)
  }, 2000)
})

const p3 = new Promise((resolve, reject) => {
  const obj = { data: '33333' }
  setTimeout(() => {
    resolve(obj)
  }, 1000)
})

Promise.race([p1, p2, p3]).then(result => {
  console.log(result)
}).catch(err => {
  console.log('err:', err)
})

Look at the console print: 

Because p3 takes the shortest and fastest time, the result obtained by result is the result value of p3resolve, but if the fastest one rejects, let's take a look: 

const p1 = new Promise((resolve, reject) => {
  const obj = { data: '11111' }
  setTimeout(() => {
    resolve(obj)
  }, 3000)
})

const p2 = new Promise((resolve, reject) => { 
  const obj = { data: '22222' }
  setTimeout(() => {
    reject('出错了~~~')
  }, 500)
})

const p3 = new Promise((resolve, reject) => {
  const obj = { data: '33333' }
  setTimeout(() => {
    resolve(obj)
  }, 1000)
})

Promise.race([p1, p2, p3]).then(result => {
  console.log(result)
}).catch(err => {
  console.log('err:', err)
})

Let's modify the code, set the p2 time to 0.5s, and it is in the rejected state, let's look at the print result again: 

It will be caught directly by the catch. From this point of view, if the fastest state is the rejected state, then the state of our subsequent resolve will not get the value. If we want to get the fastest fulfilled state value, that is, if there is a reject before, we ignore it, and then wait for the next resolve, how to do it, this is the any method

4. any 

const p1 = new Promise((resolve, reject) => {
  const obj = { data: '11111' }
  setTimeout(() => {
    resolve(obj)
  }, 3000)
})

const p2 = new Promise((resolve, reject) => { 
  const obj = { data: '22222' }
  setTimeout(() => {
    reject('出错了~~~')
  }, 500)
})

const p3 = new Promise((resolve, reject) => {
  const obj = { data: '33333' }
  setTimeout(() => {
    resolve(obj)
  }, 1000)
})

Promise.any([p1, p2, p3]).then(result => {
  console.log(result)
}).catch(err => {
  console.log('err:', err)
})

Still the last code, let's change the method to any, and then look at the print result: 

We will get the result of p3 resolve after 1s, and ignore the p2 reject, so what will it do if all our Promises are in the rejected state? Let's take a look:

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('出错了111~~~')
  }, 3000)
})

const p2 = new Promise((resolve, reject) => { 
  setTimeout(() => {
    reject('出错了222~~~')
  }, 500)
})

const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('出错了333~~~')
  }, 1000)
})

Promise.any([p1, p2, p3]).then(result => {
  console.log(result)
}).catch(err => {
  console.log('err:', err, err.errors)
})

Let's look at the print results: 

It will catch and print out the error message. The err.errors will contain the error message passed by our reject, and err is the error message encapsulated inside it.