Promise详解

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

1
2
3
4
5
6

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())
1
2
3

只要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))


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

如果上一步的执行结果不是当前想要的结果，则跳过当前的方法

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


1
2
3
4
5
6
7

这里原本输出的应该是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),]))
1
2
3
4
5
6

但是如果数组里面有一个错误对象，则会返回一个被拒绝（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),]))

1
2
3
4
5
6
7

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),]))
1
2

Promise.any([…]）

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

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

如果参数里面没有一个Promise的状态是完成的，则会返回状态是里面最快的一个。

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