深入了解Promise

97 阅读2分钟

现在有一个需求:

  • 执行一个异步任务
  • 如果执行成功调用 success
  • 如果执行失败就调用 fail

Promise可以满足这个要求。 Promise是什么?

Promise怎么做? return new Promise( ( resolve , reject) => { resolve() // reject()} ) Promise 有三个状态,分别是 pending(待定),fulfilled(解决),rejected(拒绝) 状态变化规则

  • 待定 => 解决
  • 待定 => 拒绝
  • 待定 => 待定
  • 只有这三种转换

Promise 里的resolve和reject只是进行状态变化,如果你解决或拒绝后要调用函数或者其他的,你需要用then,比如 我现在要摇色子,摇出数来就是成功(resolve(n)),成功后用then把数字打印出来,n作为参数就会传给success函数。

function 摇色子() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const n = Math.floor(Math.random() * 6) + 1
      resolve(n) // 理论上摇色子不会失败
    }, 3000)
  })
}
摇色子().then(success, fail)
function success(data) {
  console.log('成功,点数为' + data)
}
function fail(reason) {
  console.log('失败了,原因是' + reason)
}

可以进行链式调用 .then(success,fail).then(success2,fail2) 规则 以摇色子().then(s1,f1).then(s2,f2)为例 如果摇色子成功调用s1,反之调用f1 如果s1被调用,那么s2和f2都有可能会被调用 调用哪个取决与s1的返回值,s1 如果 return Promise.reject(reason) 或 throw reason 那么调 用f2 如果 return Promise.resolve(data) 或 throw data 那么调用s2 同理f2调用也是取决返回的值 关于.then 每次调用 .then,都会创建一个新的Promise 为什么会这样 因为原来的Promise的状态已经不可以改变,只有创建一个新的 Promise 才可以改变 Promise 解决了什么

  • 一种解决异步问题的通用方案
  • 没有回调地狱(因为 .then 不会一直缩进)
  • 没有复杂事件(因为 .then 只接受成功和失败两种情况)

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