Use of Pomise.all:
Promise.all can wrap multiple Promise instances into a new Promise instance. At the same time, the return values of success and failure are different. When it succeeds, it returns a result array, and when it fails, it returns the value that was rejected first.
The specific code is as follows:
let p1 = new Promise((resolve, reject) => {
resolve('成功了')
})
let p2 = new Promise((resolve, reject) => {
resolve('success')
})
let p3 = Promse.reject('失败')
Promise.all([p1, p2]).then((result) => {
console.log(result) //['成功了', 'success']
}).catch((error) => {
console.log(error)
})
Promise.all([p1,p3,p2]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) // 失败了，打出 '失败'
})
Promse.all is very useful when dealing with multiple asynchronous processes. For example, a page needs to wait for two or more ajax data to come back before displaying normally. Before that, only the loading icon is displayed.
Code mock:
let wake = (time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`${
time / 1000}秒后醒来`)
}, time)
})
}
let p1 = wake(3000)
let p2 = wake(2000)
Promise.all([p1, p2]).then((result) => {
console.log(result) // [ '3秒后醒来', '2秒后醒来' ]
}).catch((error) => {
console.log(error)
})
It should be noted that the order of data in the array of successful results obtained by Promise.all is consistent with the order of the array received by Promise.all, that is, the result of p1 comes first, even if the result of p1 is obtained later than that of p2. This brings a great benefit: in the process of front-end development requesting data, occasional scenarios where multiple requests are sent and data is obtained and used according to the order of requests, using Promise.all can undoubtedly solve this problem .
Use of Promise.race:
As the name suggests, Promse.race means race, which means that whichever result in Promise.race([p1, p2, p3]) is obtained quickly, that result will be returned, regardless of whether the result itself is in a successful state or a failed state.
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success')
},1000)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('failed')
}, 500)
})
Promise.race([p1, p2]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) // 打开的是 'failed'
})
The principle is quite simple, but there are not many scenarios used in normal projects. Generally, the logic of the front-end is not too complicated, and the back-end with humanity generally designs the interface very conveniently, not only to reflect its own technology, but also to Prevent front-end colleagues from complaining.