Promise.all
This method wraps multiple promise instances into one. The method accepts an array of slave parameters, which are all promise instances ( Promise.resolve ) . The parameter may not be an array, but it must have an Iterator interface and return a promise instance, returning a new promise
1/Only when all the promise instances in the array become fulfilled , the new promise instance returned later will become fulfilled
2/As long as there is a promise instance in the array whose status changes to reject , the state of the new promise instance returned later will be reject
Look at the code below
let p1 = new Promise((resolve,reject) =>{
console.log('第一步');
resolve(1111);
})
let p2 = new Promise((resolve,reject) =>{
console.log('第二部');
resolve(5555);
})
let p3 = new Promise((resolve,reject) =>{
console.log('第三步');
resolve(666666);
})
Promise.all([p1,p2,p3]).then(res =>{
console.log('成功');
}).catch(err =>{
console.log('失败');
})
//第一步
//第二部
//第三步
//成功
————————————————————————————————
对比代码
------------------------------------------------------------------------------------------------
let p1 = new Promise((resolve,reject) =>{
console.log('第一步');
resolve(1111);
})
let p2 = new Promise((resolve,reject) =>{
console.log('第二部');
reject(5555);
})
let p3 = new Promise((resolve,reject) =>{
console.log('第三步');
resolve(666666);
})
Promise.all([p1,p2,p3]).then(res =>{
console.log('成功');
}).catch(err =>{
console.log('失败');
})
//第一步
//第二部
//第三步
//失败
There is another situation.
If p2 itself has catch error handling, then it will not affect the state of the newly returned instance.
Because the instance of p2 actually executes the newly returned instance, when the catch is executed, the state will still become resolved. If p2 has no catch, it still executes the catch method of promise.all
let p1 = new Promise((resolve,reject) =>{
console.log('第一步');
resolve(1111);
})
let p2 = new Promise((resolve,reject) =>{
console.log('第二部');
reject(5555);
}).then(res =>{
}).catch(err =>{
})
let p3 = new Promise((resolve,reject) =>{
console.log('第三步');
resolve(666666);
})
Promise.all([p1,p2,p3]).then(res =>{
console.log('成功');
}).catch(err =>{
console.log('失败');
})
//第一步
//第二部
//第三步
//成功
Promise.race()
This method is the same as the method of passing parameters to .all.
1. The state that appears for the first time will become the state that returns the instance later,
see the following code
let p1 = new Promise((resolve,reject) =>{
console.log('第一步');
reject(1111);
})
let p2 = new Promise((resolve,reject) =>{
console.log('第二部');
resolve(5555);
})
let p3 = new Promise((resolve,reject) =>{
console.log('第三步');
resolve(666666);
})
Promise.race([p1,p2,p3]).then(res =>{
console.log('成功');
}).catch(err =>{
console.log('失败');
})
//第一步
//第二部
//第三步
//失败
------------------------------------------------------------------
对比代码
------------------------------------------------------------------
let p1 = new Promise((resolve,reject) =>{
console.log('第一步');
resolve(1111);
})
let p2 = new Promise((resolve,reject) =>{
console.log('第二部');
reject(5555);
})
let p3 = new Promise((resolve,reject) =>{
console.log('第三步');
resolve(666666);
})
Promise.race([p1,p2,p3]).then(res =>{
console.log('成功');
}).catch(err =>{
console.log('失败');
})
//第一步
//第二部
//第三步
//成功
The first piece of code, I understand, there is an error, so I went to the catch method.
In the second piece of code, p2 has an error state, but the state of the returned promise instance is still successful, which is the characteristic of this method.
Promise.allsettled()
Sometimes we need to wait for a group of asynchronous operations to end before executing the callback. In this case, promise.all cannot implement the method we want. The parameters are the same as
promise.all. It should be noted that this method will wait for all the states in the array to change before the returned Promise object changes state. (fulfilled or rejected)
see the following code
let p1 = new Promise((resolve,reject) =>{
setTimeout(() =>{
console.log('第一步');
reject(1111);
},1000)
})
let p2 = new Promise((resolve,reject) =>{
setTimeout(() =>{
console.log('第二步');
reject(1111);
},5000)
})
Promise.allSettled([p1,p2]).then(res =>{
console.log('成功');
}).catch(err =>{
console.log('失败');
})
//一秒后打印 ‘第一步’
//5秒后 打印 '第三步'
//5秒后打印'成功'
A method like all will return directly only if it has a stateful return
promise.any
If one of the methods has a successful status, then the returned status of the promise is success. If the successful status is asynchronous, it will wait for the asynchronous execution to complete for a while before returning the status of the promise. If there is a direct success status, the status returned to promsie will be executed immediately. Then method,
see the following code
let p1 = new Promise((resolve,reject) =>{
// setTimeout(() =>{
console.log('第一步');
resolve(1111);
// },1000)
})
let p2 = new Promise((resolve,reject) =>{
setTimeout(() =>{
console.log('第二步');
reject(1111);
},3000)
})
let p3 = new Promise((resolve,reject) =>{
// setTimeout(() =>{
console.log('第三步');
reject(1111);
// },3000)
})
Promise.any([p1,p2,p3]).then(res =>{
console.log('成功');
}).catch(err =>{
console.log('失败');
})
//第一步
//第三步
//成功 执行了 .then
//3秒后 ‘第二步’-
-------------------------------代码分割--------------------------------------------
let p1 = new Promise((resolve,reject) =>{
// setTimeout(() =>{
console.log('第一步');
reject(1111);
// },1000)
})
let p2 = new Promise((resolve,reject) =>{
setTimeout(() =>{
console.log('第二步');
resolve(1111);
},3000)
})
let p3 = new Promise((resolve,reject) =>{
// setTimeout(() =>{
console.log('第三步');
reject(1111);
// },3000)
})
Promise.any([p1,p2,p3]).then(res =>{
console.log('成功');
}).catch(err =>{
console.log('失败');
})
//第一步
//第三步
//三秒后 ‘第二步’
//三秒后 ‘成功’
Reference: https://es6.ruanyifeng.com/#docs/promise