promise

[yangchendoit]

浅谈promise

什么是promise

含义

承诺

MDN: promise对象用来表示一个异步操作的最终状态（完成或失败），以及其返回的值

特点

三个状态：

• pending 初始状态
• fulfilled(resolved) 成功
• rejected 失败

对象

属性： Promise.length, Promise.prototype
方法： Promise.all, Promise.race, Promise.reject, Promise.resolve

原型

属性: Promise.prototype.constructor

方法:

• Promise.prototype.catch
• Promise.prototype.then
• Promise.prototype.finally

Promises/A+ 规范

规范链接

要求

状态

必须为三态之一

pending（等待态）: 可以迁移至其他状态
fulfilled（执行态）：不能改变状态，拥有一个不可变的值
rejected（拒绝态）：不能改变状态，拥有一个不可变的据因

then方法

一个promise必须提供一个then方法以访问其当前值、终值、据因

promise.then(onFulfilled, onRejected)

上述两个参数均可选，若不是函数，必须被忽略

onFulfilled特性

• 当promise执行结束后必须被调用，第一个参数为promise终值
• 在promise执行结束前不可被调用
• 其调用次数不可超过一次

onRejected特性

• ....被拒绝执行后..据因
• ....被拒绝执行后..
• .....

调用时机

onFulfilled和onRejected只有在执行环境堆栈仅包含平台代码时才可被调用
（确保是异步执行，且应该在被调用的那一轮事件循环之后的新执行栈中执行）

调用要求

必须作为函数调用

多次调用

then方法可以被同一个promise调用多次

• 当promise成功执行时，所有onFulfilled需按照其注册顺序依次回调
• 当promise被拒绝执行时，所有onRejected需按照其注册顺序依次回调

返回

必须返回一个promise对象

Promise解决过程

一个抽象的操作，需输入一个promise和一个值x，我们表示为[[Resolve]](promise, x)，如果x有then方法且看上去像一个Promise，解决程序即尝试使promise接受x的状态，否则用x的值来执行promise

运行[[Resolve]](promise, x)需遵循

x === promise
以TypeError为据因拒绝执行promise

x为Promise
使promise接受x的状态

x为对象或函数

1. 把 x.then 赋值给 then
2. 如果取 x.then 的值时抛出错误 e ，则以 e 为据因拒绝 promise
3. 如果 then 是函数，将 x 作为函数的作用域 this 调用之。传递两个回调函数作为参数，第一个参数叫做 resolvePromise ，第二个参数叫做 rejectPromise:
   • 如果 resolvePromise 以值 y 为参数被调用，则运行 [[Resolve]](promise, y)
   • 如果 rejectPromise 以据因 r 为参数被调用，则以据因 r 拒绝 promise
   • 如果 resolvePromise 和 rejectPromise 均被调用，或者被同一参数调用了多次，则优先采用首次调用并忽略剩下的调用
   • 如果调用 then 方法抛出了异常 e：
     • 如果 resolvePromise 或 rejectPromise 已经被调用，则忽略之
     • 否则以 e 为据因拒绝 promise
   • 如果 then 不是函数，以 x 为参数执行 promise
4. 如果 x 不为对象或者函数，以 x 为参数执行 promise

手写一个符合规范的promise

mdn-promise

promise实现详解

剖析promise

const PENDING = "PENDING";
const FULFILLED = "FULFILLED";
const REJECTED = "REJECTED";
const isFunction = variable => typeof variable === "function";
class MyPromise {
  constructor(resolver) {
    if (!isFunction(resolver)) {
      throw new TypeError(
        "Promise resolver " + resolver + " is not a function"
      );
    }
    // 添加状态
    this._status = PENDING;
    // 添加状态
    this._value = undefined;
    // 添加成功回调函数队列
    this._fulfilledQueues = [];
    // 添加失败回调函数队列
    this._rejectedQueues = [];
    // 执行resolver
    try {
      resolver(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);
  }
  finally(cb) {
    return this.then(
      value => MyPromise.resolve(cb()).then(() => value),
      reason =>
        MyPromise.resolve(cb()).then(() => {
          throw reason;
        })
    );
  }
  // 添加静态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);
          }
        );
      }
    });
  }
}

class Test {
  static test() {
    MyPromise.resolve("正确").then(data => {
      console.log(data);
    });

    MyPromise.reject("错误").then(undefined, err => {
      console.log(err);
    });

    new MyPromise((resolve, reject) => {
      setTimeout(() => {
        console.log("异步");
        resolve("异步结果");
      }, 1000);
    }).then(data => {
      console.log(data);
    });
  }
}

Test.test();