深入了解Promise

Posted 2021-09-13 zhaojiaershao

promise.all原理

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.all([p1, p2]);

状态响应情况

p的状态由p1、p2决定，分成两种情况。

（1）只有p1、p2的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

不同之处

p1、p2实例的.catch与 .promise.all()的.catch

const p1 = new Promise((reslove) => {
    reslove(\'成功回调\')
}).then(res => res).catch(err => err)

const p2 = new Promise((reslove, reject) => {
    reject(\'报错了\')
}).then(res => res).catch(err => err)

export default function() {
    return Promise.all([p1, p2]).then((res) => {
        console.log(res) ["成功回调", "报错了"]
    }).catch((err) => {
        console.log(err)
    })
}

const p1 = new Promise((reslove) => {
    reslove(\'成功回调\')
}).then(res => res)

const p2 = new Promise((reslove, reject) => {
    reject(\'报错了\')
}).then(res => res)

export default function() {
    return Promise.all([p1, p2]).then((res) => {
        console.log(res)
    }).catch((err) => {
        console.log(err) 报错了
    })
}

代码解析

1. 入参数组中的每一个promise实例都返回成功，才会返回成功，返回的是由多个promise对象成功返回值的组成的数组；
2. promise.all参数中的实例如果有一个是失败回调，想要执行.then方法的话，失败的实例需要使用.catch方法，这样就会得到失败和成功的结果，返回结果是一个数组；如果不想执行.then方法的话参数中的实例对象就不用.catch了
3. 入参是一个数组，可以传基本类型值，也可以传promise对象。

Promise.race使用

顾名思义，Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

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