美文网首页
Promise下篇

Promise下篇

作者: 懂会悟 | 来源:发表于2020-09-22 09:29 被阅读0次

1、Promise.all()

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

Promise.all([p1, p2, p3]).then(([res1, res2, res3]) => {}).catch(e => console.log(e))
// p1、p2、p3都是 Promise 实例

p的状态由p1、p2、p3共同决定,分两种情况

  • 只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。
  • 只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数

如果作为参数的 Promise 实例,自己定义了catch方法,那么它一旦被rejected,并不会触发Promise.all()的catch方法。如果作为参数的 Promise 实例没有自己的catch方法,就会调用Promise.all()的catch方法


2、Promise.race()

Promise.race()方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例

const p = Promise.race([p1, p2, p3])

上面代码中,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。


3、Promise.allSettled()

Promise.allSettled()方法接受一组 Promise 实例作为参数,包装成一个新的 Promise 实例。只有等到所有这些参数实例都返回结果,不管是fulfilled还是rejected,包装实例才会结束,该方法由 ES2020 引入

const p = Promise.race([p1, p2, p3])

上面代码中,只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。

const resolved = Promise.resolve(42)
const rejected = Promise.reject(-1)
const allSettledPromise = Promise.allSettled([resolved, rejected])
allSettledPromise.then(function (results) {
  console.log(results)
})

// [{ status: 'fulfilled', value: 42 }, { status: 'rejected', reason: -1 }]

上面代码中,Promise.allSettled()的返回值allSettledPromise,状态只可能变成fulfilled。它的监听函数接收到的参数是数组results。该数组的每个成员都是一个Promise 实例对象。每个对象都有status属性,该属性的值只可能是字符串fulfilled或字符串rejected。fulfilled时,对象有value属性,rejected时有reason属性,对应两种状态的返回值。


4、Promise.resolve()

Promise.resolve()方法可以将现有对象转换为Promise对象,并返回。resolve方法的参数可分为以下四种情况

  • 参数是一个 Promise 实例

如果参数是 Promise 实例,那么Promise.resolve将不做任何修改、原封不动地返回这个实例。

  • 参数是一个具有then方法的对象

Promise.resolve方法会将这个对象转为 Promise 对象,然后就立即执行对象的then方法。

  • 参数不是具有then方法的对象,或根本就不是对象

如果参数是一个原始值,或者是一个不具有then方法的对象,则Promise.resolve方法返回一个新的 Promise 对象,状态为resolved。

  • 不带有任何参数

如果resolve不带参数,则直接返回一个resolved状态的 Promise 对象。

let thenable = {
  then: (resolve, reject) => {
    resolve(42)
  }
}
let p1 = Promise.resolve(thenable)
p1.then(value => {
  console.log(value)
})


相关文章

网友评论

      本文标题:Promise下篇

      本文链接:https://www.haomeiwen.com/subject/gmtosktx.html