Promise详解

本文详细解释了Promise在JavaScript中的作用,包括解决回调地狱问题,then,catch,finally方法的工作原理,以及Promise的链式调用、静态方法如Promise.resolve和Promise.reject,以及并发处理函数Promise.all,Promise.allSettled,Promise.race和Promise.any的用法和行为。
摘要由CSDN通过智能技术生成

Promise解决回调地狱

sum(1, 3)
  .then(r => { return sum(r, 3) })//PromiseResult为7,输出4
  .then(r => { return sum(r, 3) })//PromiseResult为10,输出7
  .then(r => { return sum(r, 3) })//PromiseResult为13,输出10
  .then(r => console.log(r))//PromiseResult为16,输出13

在这里插入图片描述

promise中的then,catch,finally

then()
catch()
finally()
这三个方法都会返回一个新的Promise

  console.log(Promise.resolve(6).then())
  console.log(Promise.reject(6).catch())
  console.log(Promise.reject(6).finally())

在这里插入图片描述
只要Promise调用then,catch,finally就会返回一个新的Promise,而then,catch里面的返回值就是新的Promise的result

Promise的链式调用

Promise.resolve(11).then((r) => {
  return 1
})
  .then((r) => {
    console.log(r, "我(一个Promise)读取的是上一个Promise的PromiseResult(1),但是我自己回调函数的返回值是我的PromiseResult(2),我读取不到我的PromiseResult,只能读取上一个Promise的PromiseResult,而下一个then()/catch()可以读取我的结果")
    return 2
  })
  .then((r) => {
    console.log(r)
    return 3
  })
  .then((r) => {
    console.log(r)
    return 4
  })
  .then((r) => console.log(r))


在这里插入图片描述
如果上一步的执行结果不是当前想要的结果,则跳过当前的方法

    Promise.resolve(22).then((r) => {
      return 1
    }).catch((r) => {
      return 2
    }).then((r) => console.log(r))


在这里插入图片描述
这里原本输出的应该是2,但是实际输出的却是1,说明跳过了catch(),
因为then()读取的是PromiseState为"fulfilled"的PromiseResult,但是catch()方法返回的Promise中PromiseState为"rejected",所以不是then()想要读取的,就会跳过。

静态方法

Promise.resolve()创建一个立即完成的Promise
Promise.reject()创建一个立即拒绝的Promise

Promise的其他方法

Promse.All()

Promise.all([])参数是一个可迭代对象,如 Array 或 String。
全部加载成功 则返回所有resolve按顺序所集合的数组
有一个失败 则立即返回失败的reject
空数组 则直接成功

 function sum(a, b) {
      return new Promise((resolve, reject) => {
        resolve(a + b)
      })
    }
    console.log(Promise.all([sum(1, 1), sum(1, 2), sum(1, 3), sum(1, 4),]))

在这里插入图片描述

但是如果数组里面有一个错误对象,则会返回一个被拒绝(rejected)的 Promise。即Promise.all() 中的任何一个 Promise 被拒绝,整个 Promise.all() 就会立即被拒绝,并且它的拒绝原因(reason)是第一个被拒绝的 Promise 的原因。
在这里插入图片描述

Promse.AllSettled([…])

与 Promise.all([…])不同的只是,Promise.allsettled()不会在任何 Promise 被拒绝时中止,并且总是等待所有 Promise 对象都已解决或拒绝后才返回结果。返回的数组中的每个元素都是一个对象,即无论对错,全部返回。

  function sum(a, b) {
      return new Promise((resolve, reject) => {
        resolve(a + b)
      })
    }
    console.log(Promise.allSettled([Promise.reject("你好"), sum(1, 2), sum(1, 3), sum(1, 4),]))

在这里插入图片描述

Promse.Race([…])

返回执行最快的Promise(不考虑对错)

    console.log(Promise.race([sum(1, 2), sum(1, 3), Promise.reject("你好"), sum(1, 4),]))
    console.log(Promise.race([Promise.reject("你好"), sum(1, 2), sum(1, 3), sum(1, 4),]))

在这里插入图片描述

Promise.any([…])

返回执行最快的完成的Promise(即PromiseResult=fulfilled且是最快的才会被返回)

 console.log(Promise.any([Promise.reject("你好"), sum(1, 2), sum(1, 3), sum(1, 4),]))

在这里插入图片描述
如果参数里面没有一个Promise的状态是完成的,则会返回状态是里面最快的一个。

    console.log(Promise.any([Promise.reject("他好"), Promise.reject("我也好"),]))

在这里插入图片描述

  • 22
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值