介绍Promise

Promise 是异步编程的一种解决方案,当我们调用一个函数发送网络请求,
如果调用成功,那么告知调用者发送成功,并且将相关数据返回过去。
如果调用失败,那么告知调用者发送失败,并且告知错误信息。
当我们需要给予调用者一个承诺:待会儿我会给你回调数据时,就可以创建一个Promise的对象。

Promise代码结构

Snipaste_20220120_202556.png
Promise一共具有三种状态(pending,reslove,reject)

  1. 待定(pending): 初始状态,既没有被兑现,也没有被拒绝;
  2. 已兑现(fulfilled): 意味着操作成功完成
  3. 已拒绝(rejected): 意味着操作失败
    并且当任何一种状态发生改变后,就会处于该状态后续不会进行改变。

then方法

then方法其实是Promise实例出来对象的方法,它可以接受两个参数

  • pfulfilled的回调函数:当状态变成fulfilled时会回调的函数
  • reject的回调函数:当状态变成reject时会回调的函数
const promises=new Promise((resolve,reject)=>{
  reject("凯撒")
})
promises.then(res=>{
  console.log("res",res);
 return "111"
}).catch(err=>{
 console.log("err",err);
})

catch方法

catch方法也是Promise对象上的一个方法:它也是放在Promise的原型上的 Promise.prototype.catch

1.当executor抛出异常时, 也是会调用错误(拒绝)捕获的回调函数的
const promise = new Promise((resolve, reject) => {
  reject("111111")
})

promise.then(res => {
  console.log("res:", res)
}).catch(err => {
  console.log("err:", err)
  return "catch return value"
}).then(res => {
  console.log("res result:", res)
}).catch(err => {
  console.log("err result:", err)
})

finally方法

finally是在ES9(ES2018)中新增的一个特性:表示无论Promise对象无论变成fulfilled还是reject状态,最终都会被执行的代码。

const promise = new Promise((resolve, reject) => {
  // resolve("resolve message")
  reject("reject message")
})

promise.then(res => {
  console.log("res:", res)
}).catch(err => {
  console.log("err:", err)
}).finally((onfinally)=>{
console.log("onfinally",onfinally); //不管是fulfilled状态,还是reject状态,这里的都会执行
})


resolve类方法

上面说的都是Promise的对象方法,现在开始是Promise类直接使用的方法。
Promise.resolve的用法相当于new Promise,并且执行resolve操作。

reject类方法

Promise.reject的用法相当于new Promise,并且执行reject操作。
Promise.reject传入的参数无论是什么形态,都会直接作为reject状态的参数传递到catch的。

all类方法

它的作用是将多个Promise包裹在一起形成一个新的Promise

当所有的Promise状态变成fulfilled状态时,新的Promise状态为fulfilled,并且会将所有Promise的返回值
组成一个数组
当有一个Promise状态为reject时,新的Promise状态为reject,并且会将第一个reject的返回值作为参数

// 创建多个Promise
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(11111)
  }, 1000);
})

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(22222)
  }, 2000);
})

const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(33333)
  }, 3000);
})

// 需求: 所有的Promise都变成fulfilled时, 再拿到结果
// 意外: 在拿到所有结果之前, 有一个promise变成了rejected, 那么整个promise是rejected
Promise.all([p2, p1, p3, "aaaa"]).then(res => {
  console.log(res)
}).catch(err => {
  console.log("err:", err)
})


allSettled类方法

all方法有一个缺陷,当有其中一个Promise变成reject状态时,新Promise就会立即变成对应的reject状态。
这时就出现了allSettled方法来解决这个问题,
该方法会在所有的Promise都有结果(settled),无论是fulfilled,还是reject时,才会有最终的状态,并且返回的是一个数组结果

// 创建多个Promise
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(11111)
  }, 1000);
})

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(22222)
  }, 2000);
})

const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(33333)
  }, 3000);
})

// allSettled
Promise.allSettled([p1, p2, p3]).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})
——————————————————结果↓
[
  { status: 'fulfilled', value: 11111 },
  { status: 'rejected', reason: 22222 },
  { status: 'fulfilled', value: 33333 }
]

race类方法

如果有一个Promise有了结果,我们就希望决定最终新Promise的状态,那么可以使用race方法。
race是竞技、竞赛的意思,表示多个Promise相互竞争,谁先有结果,那么就使用谁的结果,如果是错误的就会使用错误,如果正常就会使用正确的。

any类方法

any方法是ES12中新增的方法,和race方法是类似的
any方法会等到一个fulfilled状态,才会决定新Promise的状态
如果所有的Promise都是reject的,那么会报一个AggregateError的错误

Q.E.D.