js Promise实现笔记

V8引擎的实现源码：promise.js
非官方实现，来自：Promise实现原理（附源码）
注：啃官方源码和其他原型链的实现有点烦躁，找了个用class语法糖的源码实现，下面代码主要是这个非官方实现

快速答几个问题先：
1.setTimeout设置0延时，并不是同步执行，而是交由定时器线程计时并在指定时间插入到js线程的消息队列，达到延迟(异步)执行。关于chrome的最小1ms延迟参见：定时器(setTimeout/setInterval)最小延迟的问题
2.实际Promise中的resolve和reject有这么神奇的表现，其实就是对setTimeout的一层封装而实现异步(官方实现有出入)
3.then的链式调用，实际是每次返回一个全新的Promise，其新的Promise对象在构造时完成对前一个Promise的处理。
4.源码带上all、race这些方法也就恰好199行，不看我废话其实挺少的

正文

非官方代码：

// 判断变量否为function
const isFunction = variable => typeof variable === 'function'
// 定义Promise的三种状态常量
const PENDING = 'PENDING'
const FULFILLED = 'FULFILLED'
const REJECTED = 'REJECTED'

class MyPromise {
  constructor(handle) {
    if (!isFunction(handle)) {
      throw new Error('MyPromise must accept a function as a parameter')
    }
    // 添加状态
    this._status = PENDING
    // 添加状态
    this._value = undefined
    // 添加成功回调函数队列
    this._fulfilledQueues = []
    // 添加失败回调函数队列
    this._rejectedQueues = []
    // 执行handle
    try {
      handle(this._resolve.bind(this), this._reject.bind(this))
    } catch (err) {
      this._reject(err)
    }
  }
  // 添加resovle时执行的函数
  _resolve(val) {
    const run = () => {
      if (this._status !== PENDING) return
      // 依次执行成功队列中的函数，并清空队列
      const runFulfilled = (value) => {
        let cb;
        while (cb = this._fulfilledQueues.shift()) {
          cb(value)
        }
      }
      // 依次执行失败队列中的函数，并清空队列
      const runRejected = (error) => {
        let cb;
        while (cb = this._rejectedQueues.shift()) {
          cb(error)
        }
      }
      /* 如果resolve的参数为Promise对象，则必须等待该Promise对象状态改变后,
        当前Promsie的状态才会改变，且状态取决于参数Promsie对象的状态
      */
      if (val instanceof MyPromise) {
        val.then(value => {
          this._value = value
          this._status = FULFILLED
          runFulfilled(value)
        }, err => {
          this._value = err
          this._status = REJECTED
          runRejected(err)
        })
      } else {
        this._value = val
        this._status = FULFILLED
        runFulfilled(val)
      }
    }
    // 为了支持同步的Promise，这里采用异步调用
    setTimeout(run, 0)
  }
  // 添加reject时执行的函数
  _reject(err) {
    if (this._status !== PENDING) return
    // 依次执行失败队列中的函数，并清空队列
    const run = () => {
      this._status = REJECTED
      this._value = err
      let cb;
      while (cb = this._rejectedQueues.shift()) {
        cb(err)
      }
    }
    // 为了支持同步的Promise，这里采用异步调用
    setTimeout(run, 0)
  }
  // 添加then方法
  then(onFulfilled, onRejected) {
    const { _value, _status } = this
    // 返回一个新的Promise对象
    return new MyPromise((onFulfilledNext, onRejectedNext) => {
      // 封装一个成功时执行的函数
      let fulfilled = value => {
        try {
          if (!isFunction(onFulfilled)) {
            onFulfilledNext(value)
          } else {
            let res = onFulfilled(value);
            if (res instanceof MyPromise) {
              // 如果当前回调函数返回MyPromise对象，必须等待其状态改变后在执行下一个回调
              res.then(onFulfilledNext, onRejectedNext)
            } else {
              //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
              onFulfilledNext(res)
            }
          }
        } catch (err) {
          // 如果函数执行出错，新的Promise对象的状态为失败
          onRejectedNext(err)
        }
      }
      // 封装一个失败时执行的函数
      let rejected = error => {
        try {
          if (!isFunction(onRejected)) {
            onRejectedNext(error)
          } else {
            let res = onRejected(error);
            if (res instanceof MyPromise) {
              // 如果当前回调函数返回MyPromise对象，必须等待其状态改变后在执行下一个回调
              res.then(onFulfilledNext, onRejectedNext)
            } else {
              //否则会将返回结果直接作为参数，传入下一个then的回调函数，并立即执行下一个then的回调函数
              onFulfilledNext(res)
            }
          }
        } catch (err) {
          // 如果函数执行出错，新的Promise对象的状态为失败
          onRejectedNext(err)
        }
      }
      switch (_status) {
        // 当状态为pending时，将then方法回调函数加入执行队列等待执行
        case PENDING:
          this._fulfilledQueues.push(fulfilled)
          this._rejectedQueues.push(rejected)
          break
        // 当状态已经改变时，立即执行对应的回调函数
        case FULFILLED:
          fulfilled(_value)
          break
        case REJECTED:
          rejected(_value)
          break
      }
    })
  }
  // 添加catch方法
  catch(onRejected) {
    return this.then(undefined, onRejected)
  }
  // 添加静态resolve方法
  static resolve(value) {
    // 如果参数是MyPromise实例，直接返回这个实例
    if (value instanceof MyPromise) return value
    return new MyPromise(resolve => resolve(value))
  }
  // 添加静态reject方法
  static reject(value) {
    return new MyPromise((resolve, reject) => reject(value))
  }
  // 添加静态all方法
  static all(list) {
    return new MyPromise((resolve, reject) => {
      /**
       * 返回值的集合
       */
      let values = []
      let count = 0
      for (let [i, p] of list.entries()) {
        // 数组参数如果不是MyPromise实例，先调用MyPromise.resolve
        this.resolve(p).then(res => {
          values[i] = res
          count++
          // 所有状态都变成fulfilled时返回的MyPromise状态就变成fulfilled
          if (count === list.length) resolve(values)
        }, err => {
          // 有一个被rejected时返回的MyPromise状态就变成rejected
          reject(err)
        })
      }
    })
  }
  // 添加静态race方法
  static race(list) {
    return new MyPromise((resolve, reject) => {
      for (let p of list) {
        // 只要有一个实例率先改变状态，新的MyPromise的状态就跟着改变
        this.resolve(p).then(res => {
          resolve(res)
        }, err => {
          reject(err)
        })
      }
    })
  }
  finally(cb) {
    return this.then(
      value => MyPromise.resolve(cb()).then(() => value),
      reason => MyPromise.resolve(cb()).then(() => { throw reason })
    );
  }
}

看代码(类名我直接当作是Promise了，请注意)，按步骤分析主要流程(_resolve、then)：
1.Promise构造函数中先初始化4个成员变量，其中
this._status代表当前状态
this._value用来存着结果值
this._fulfilledQueues和另外一个，用来存着稍后then方法可能push进来的封装过的回调方法

2.Promise构造函数中马上调用传入的handle函数，给他传入我们"封装了setTimeout"的_resolve方法。_resolve即我们new Promise( function(resolve,reject){resolve(10)} )的那个resolve。这个方法只干两件事：暴露它的参数10给内部run方法；setTimeout(run,0)来异步调用run方法。
而内部run方法主要干三件事情：修改this._status; 修改this._value;从this._fulfilledQueues(或另一个队列)中取出全部函数并逐一调用(即cb(value))。

小结：当value是Promise对象时，run还会做一层处理，此类细节不再叙述，看源码比较不啰嗦。此处已能够帮助我们理解new Promise时发生了什么；为什么函数会被执行但是resolve处又会跳过等等“特性”，都已经非常清晰。

3.then方法：
上面流程做完，就等着then方法被调用了。此时then方法中会new一个Promise返回，而new Promise需要一个handle函数当参数，所以我们只需要关注这个then方法中怎么写这个“默认handle函数”就行了(注意，new Promise中handle是会被同步执行的，前面提到了)。

很显然，“默认handle”主要只干一件事情：判断如何调用内部的fulfilled(value)函数。
而fulfilled主要干两件事情：调用then的参数函数"onFulfilled(value)"；调用新Promise对象的参数函数"onFulfilledNext(value)"(即新Promise对象中的_resolve)。value的处理逻辑看代码不废话了。

判断部分：
1.同步调用then，此时Promise状态为PENDING，也就是run尚未被调用(只有这个方法会改变状态的值)。那么我们把fulfilled送进队列就行了，待会run被调用时，会清空我们的队列并完成调用。
2.异步调用then，如setTimeout(obj.then,100,...省略)。此时我们的run可能被调用了，从而状态为FULFILLED，意味着this._value已经也被run给修改了，那么直接调用fulfilled(_value)(注意this指向问题)

链式调用then：
第一个Promise的then中，最终会调用第二个Promise的_resolve，从而启动第二个Promise的setTimeout(run,0)......剩下就是重复的逻辑和流程，当调用第二个Promise的then时，把回调方法同样封装后插进它的队列里面(或异步then导致可能直接执行而不进队列，就上面的步骤)。

必看

micro-task和macro-task，即微任务和宏任务：知乎 Promise的队列与setTimeout的队列有何关联？
即

setTimeout(function () { console.log(4) }, 0);
new Promise(function (resolve) {
    console.log(1)
    for (var i = 0; i < 10000; i++) {
        i == 9999 && resolve()
    }
    console.log(2)
}).then(function () { console.log(5) });
console.log(3);

结果是1,2,3,5,4。如果改成上面我们的MyPromise，结果是1,2,3,4,5。
原因在于V8引擎中，用的是%EnqueueMicrotask，是微任务；我们这里是直接setTimeout，是宏任务。而micro-task和macro-task这两个队列的执行逻辑如下：

这里提及了 macrotask 和 microtask 两个概念，这表示异步任务的两种分类。在挂起任务时，JS 引擎会将所有任务按照类别分到这两个队列中，首先在 macrotask 的队列（这个队列也被叫做 task queue）中取出第一个任务，执行完毕后取出 microtask 队列中的所有任务顺序执行；之后再取 macrotask 任务，周而复始，直至两个队列的任务都取完。
macro-task: script（整体代码）, setTimeout, setInterval, setImmediate, I/O, UI rendering
micro-task: process.nextTick, Promises（这里指浏览器实现的原生 Promise）, Object.observe, MutationObserver

详细点进知乎链接吧，不废话了

js Promise实现笔记

正文

必看

你可能感兴趣的:(js Promise实现笔记)