Promise

Posted 2020-12-08 allenzhang-920

Promise构造函数接受一个函数作为参数，该函数有两个参数：

resolve：把状态改为fulfilled，结果为result

reject：把状态改为rejected，结果为error

 

工作原理：

　　在执行new Promise对象的时候，这个对象有个状态pending，Promise结果为undefined，而resolve和reject可以改变对象的状态

 

then方法（为 Promise 实例添加状态改变时的回调函数）

Promise原型上的方法，可以接受两个参数

onFulfilled(function) 必须  对应Promise对象的resolve方法，如果该参数不是函数，则会在内部被替换为 (x) => x，即原样返回 promise 最终结果的函数

onRejected(function) 可选  对应Promise对象的reject方法，如果该参数不是函数，则会在内部被替换为一个 "Thrower" 函数

，返回新的Promise实例。

当一个 Promise 完成（fulfilled）或者失败（rejected）时，返回函数将被异步调用（由当前的线程循环来调度完成）。具体的返回值依据以下规则返回。如果 then 中的回调函数：

• 返回了一个值，那么 then 返回的 Promise 将会成为接受状态，并且将返回的值作为接受状态的回调函数的参数值。
• 没有返回任何值，那么 then 返回的 Promise 将会成为接受状态，并且该接受状态的回调函数的参数值为 undefined。
• 抛出一个错误，那么 then 返回的 Promise 将会成为拒绝状态，并且将抛出的错误作为拒绝状态的回调函数的参数值。
• 返回一个已经是接受状态的 Promise，那么 then 返回的 Promise 也会成为接受状态，并且将那个 Promise 的接受状态的回调函数的参数值作为该被返回的Promise的接受状态回调函数的参数值。
• 返回一个已经是拒绝状态的 Promise，那么 then 返回的 Promise 也会成为拒绝状态，并且将那个 Promise 的拒绝状态的回调函数的参数值作为该被返回的Promise的拒绝状态回调函数的参数值。
• 返回一个未定状态（pending）的 Promise，那么 then 返回 Promise 的状态也是未定的，并且它的终态与那个 Promise 的终态相同；同时，它变为终态时调用的回调函数参数与那个 Promise 变为终态时的回调函数的参数是相同的。

 

let delay = (time) => {
  return new Promise((resolve, reject) => {
    if (time > 3) {
      reject(new Error(‘fail‘))
    } else {
      setTimeout(() => {
        resolve()
      }, time * 1000)
    }
  })
}

delay(1)
  .then(() => {
    return 1
  }, () => {
    return delay(2)
  })
  .then((num) => {
    console.log(`params: ${num}`)
    return delay(4)
  })
  .then((num) => {
    console.log(3)
  }, () => {
    console.log(4)
  })

params: 1
4

 

catch方法

Promise对象上的方法，用来捕获链式操作上reject抛出的异常，避免每次都在then里写onRejected

不能用throw来抛出异常，必须要用reject（可以改变Promise状态）

 

Promise的四个静态方法（应用场景：有时期望返回一个值/报错信息也能用Promise实例的方法）

resolve和reject

let getSettings = () => {
  let settings = localStorage.getItem(‘settings‘)
  if (settings) {
    return Promise.resolve(settings)
  } else {
    return new Promise((resolve, reject) => {}) // 假如是异步操作
  }
}

localStorage.setItem(‘settings‘, ‘1‘)

getSettings()
  .then(settings => {
    console.log(settings)
  })

1

 

all静态方法（场景：多个请求互不关联，但都需要请求）

返回一个 Promise 实例，等待所有都完成（或第一个失败），如果参数中  promise 有一个失败（rejected），此实例回调失败（reject），失败的原因是第一个失败 promise 的结果。

let a1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve()
  }, 1000)
})

let b1 = Promise.resolve(1)

Promise.all([a1, b1])
  .then(_ => {
    console.log(_)
  })

Array [ undefined, 1 ]

 

race静态方法（场景：多个请求，请求相同内容的资源，一个响应成功就结束）

返回一个 promise，一旦迭代器中的某个promise解决或拒绝，返回的 promise就会解决或拒绝。

let a1= new Promise(resolve => {
  setTimeout(resolve, 1000, ‘a‘)
})

let b1 = new Promise(resolve => {
  setTimeout(resolve, 500, ‘b‘)
})

Promise.race([a1, b1])
  .then(_ => {
    console.log(_)
  })

b