promise.all、promise.race 、async和await三者有哪些区别？

1.promise.all

Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候返回最先被reject的项。它是同步执行的，执行完成的总时间以最长的那个执行函数完成时间为准

 

具体代码如下：

 

let p1 = new Promise((resolve,reject) => {
    setTimeout(() => {
        resolve("成功--p1");
   },2000)
})
 
let p2 = new Promise((resolve,reject) => {
    setTimeout(() => {
        resolve("成功--p2");
   },1000)
})
 
let p3 = Promise.reject("失败--p3");

let p4 = Promise.reject("失败--p4");
 
// 成功时， 返回一个结果数组,其顺序是入参顺序，执行完成的总时间是2000ms
Promise.all([p1,p2]).then((result) => {
    console.log(result)     // ['成功--p1','成功--p2']
}).catch((error) => {
    console.log(error)
})
 
// 成功时， 返回一个结果数组,其顺序是入参顺序，执行完成的总时间是2000ms
Promise.all([p2,p1]).then((result) => {
    console.log(result)     // ['成功--p2','成功--p1']
}).catch((error) => {
    console.log(error)
})


// 失败时 p1-p3-p2-p4,结果顺序是
Promise.all([p1,p3,p2,p4]).then((result) => {
    console.log(result)
}).catch((error) => {
    console.log(error)      // error，打出'失败--p3'
})
// 失败时 p1-p4-p2-p3,结果顺序是
Promise.all([p1,p4,p2,p3]).then((result) => {
    console.log(result)
}).catch((error) => {
    console.log(error)      // error，打出'失败--p4'
})

 

 

 

 

 

2.promise.race

Promise.race([p1,p2,p3])里面哪个结果获得快，就返回哪个结果，不管结果本身是成功还是失败状态。

 

// p1延迟1000ms p2延迟500ms

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'
})


// p3延迟500ms p4延迟1000ms
let p3 = new Promise((resolve,reject) => {
    setTimeout(() => {
        resolve('success')
    },500)
})
 
let p4 = new Promise((resolve,reject) => {
    setTimeout(()=>{
        reject('failed')
    },1000)
})

Promise.race([p3,p4]).then((result)=>{
    console.log(result)  // 打开的是'success'
}).catch((error) => {
    console.log(error) 
})

 

 

 

 

 

3.async和await

async 和awiat 是成对存在的， 执行顺序是按照程序的书写顺序依次执行的

上代码：

 

let p1 = new Promise((resolve,reject) => {  
    setTimeout(() => {
        resolve('1s后，打印出p1')
    },1000)
})
 
let p2 = new Promise((resolve,reject) => {
    setTimeout(()=>{
       resolve('2s后，打印出p2')
    },2000)
})

let p3 = new Promise((resolve,reject) => {
    setTimeout(()=>{
       resolve('3s后，打印出p3')
    },3000)
})

// 调用函数getP
async function getP(){
      const p2Fn = await p2();
      const p1Fn = await p1();
      const P3Fn = await p3();
}
getP();


// 2s后，打印出p2
// 1s后，打印出p1
// 3s后，打印出p3
花费的总时间是2+1+3 = 6s

 

总结一下吧，三者各自有自己的应用场景，小伙伴们可以酌情选择！