Promise.all和Promise.race

Promise.all

• 原理

  将多个Promise实例包装成一个新的Promise实例，成功的时候返回一个结果数组，失败的时候返回最先被reject失败状态的值。

• 常见使用场景

  页面上需要等待两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading。

• 用法

let p1 = new Promise((resolve,reject) => {
    resolve('成功')
})
let p2 = new Promise((resolve,reject) => {
    resolve('success')
})
let p3 = Promise.reject('失败')
Promise.all([p1,p2]).then((result) => {
    console.log(result) // ['成功','seccess']
}).catch((error) => {
    console.log(error)
})
Promise.all([p1,p3]).then((result) => {
    console.log(result) 
}).catch((error) => {
    console.log(error)//['失败']
})

⚠️注意：成功时接收到的数组的顺序是all参数里的数组的顺序，即p1的结果在前，即便p1的结果比p2的结果晚获取到。这带来了一个好处、在前端的数据使用中，偶尔会遇到发送多个请求并根据请求的顺序获取和使用数据的场景，使用Promise.all可以解决这个问题。

Promise.race

• 原理

  有任意一个成功返回后，就算完成，但是进程不会立即停止。

• 常见使用场景

  把异步操作和定时器放到一起，如果定时器先触发，就认为超时，通知用户.比如获取微信地理位置信息，如果超时则提醒用户并且此时无法获取地理微信进行其他操作。

• 用法

let p1 = new Promise((resolve,reject) => {
 setTimeout(() => {
 resolve('成功了')
 },2000);
})
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
})