简单了解一下Promise1. Promise简易用法 2. Promise的三态待定pending 解决fufill

1. Promise简易用法

function 摇色子() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const n = Math.floor(Math.random() * 6) + 1
      // 成功时调用resolve(data)
      // 失败时调用reject(reason)
      resolve(n) // 理论上摇色子不会失败
      //reject()
    }, 3000);
  })
}

//resolve会去调用success
//reject会去调用fail
摇色子().then(success, fail)

function success(data) {
  console.log('成功，点数为' + data)
}
function fail(reason) {
  console.log('失败了，原因是' + reason)
}

2. Promise的三态

待定pending
解决fufilled
拒绝rejected

状态变化规则,只有三种情况

待定 => 解决
待定 => 拒绝
待定 => 待定

3. 链式调用

.then(success, fail).then(success2,fail2)

规则

以摇色子()..then(s1, f1).then(s2,f2)为例

如果摇色子成功，则必然调用s1; 失败则必然调用f1
如果s1被调用，那么s2和f2都有可能被调用
如果f1被调用，那么s2和f2都有可能被调用

每次调用.then 都会创建一个新的Promise，因为旧的Promise已经被解决或者拒绝了只有创建新的Promise才有可能改变状态

成功与失败的转化

摇色子()
  .then(
    (n) => { return n > 3 ? '大' : '小' },
    (reason) => { console.log('失败，原因是' + reason); throw reason }
  )
  .then(
    (data) => { console.log(data) },
    (reason) => { console.log('失败，原因是' + reason) }
  )

4. Promise的作用与本质

解决的问题

一种解决异步问题的通用方案

没有回调地狱（因为 .then 不会一直缩进）
没有复杂事件（因为 .then 只接受成功和失败两种情况）

本质

Promise.prototype.then() 把成功函数和失败函数放入队列
resolve() 调用成功函数，reject() 调用失败函数
根据成功或失败函数的返回值不同，再去调用下一个成功或失败函数

5. Promise的其他API

除了 Promise.prototype.then 还有

.catch(fn) 等价于.then(undefined, fn)
.finally(fn) 等价于.then(fn, fn)

Promise 自身的属性

Promise.all() - 等待多个异步任务全部成功（一败则败）
Promise.allSettled() - 等待多个异步任务全部成功（不会失败）
Promise.any() - 等待第一个成功（全败则败）
Promise.race() - 等待第一个结束（成功或者失败都行）
Promise.resolve() - 返回一个成功
Promise.reject() - 返回一个失败