Promise详解与实现（Promise/A+）

一、什么是Promise？

Promise是异步编程的一种解决方案：从语法上讲，Promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。Promise有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造Promise实例后，它会立即执行。

二、Promise/A+规范

详细介绍了该then方法的行为，提供了可互操作的基础，所有Promises/A+兼容的Promise实现都可以依靠该基础来提供。因此，该规范应被认为是非常稳定的。尽管Promises/A+组织有时会通过向后兼容的微小更改来修订此规范，以解决新发现的极端情况，但只有经过仔细考虑，讨论和测试之后，我们才会集成大型或向后兼容的更改。

三、Promise的实现

1. Promise是具有then行为符合本规范的方法的对象或函数。

  const promise = new Promise((resolve, reject) => {
      // 异步处理操作
      // 处理结束后调用resolve或reject
  })

2. Promise States

Promise是一个状态机，有三种状态分别是pending（等待）、fulfilled（完成态）、rejected（失败态）。当Promise处于完成或者失败状态时，它的状态不可变

  const PENDINT = 'pending';
  const FULFILLED = 'fulfilled'; // 处于此状态时，状态不可变
  const REJECTED = 'rejected'; // 处于此状态时，状态不可变

3.1 then方法

Promise必须提供一种then访问其当前或最终价值或原因的方法。then方法接受两个参数，并且这两个必须是方法，且都有默认值

  promise.then(onFulfilled, onRejected);

3.2 then必须返回一个Promise

  then(onFulfilled, onRejected) {
      let promise2 = new Promise((resolve, reject) => {
          // 这里对返回值进行处理
      })
      return promise2;
  }

3.2.1 如果onFulFilled或者onRejected返回一个值x，需要对返回值进行处理
3.2.2 如果任何一个onFulFilled或onRejected发生异常e，则promise2必须以e为异常为onRejected理由

4. Promise Resolution Procedure

  // 使用此函数对promise2和x进行处理
  // 在`resolvePromise`函数中进行处理时，需要添加一个变量进行`Promise state`控制
  resolvePromise(promise2, x, resolve, reject);

4.1 如果x和promise2是同一个Object，则抛出类型错误
 if (promise2 === x) {
       return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
   }

4.2 如果x是不为null的对象或者函数，则需要做取值then操作

  if(typeof x === 'object' && x !== null || typeof x === 'function'){
    try{
      let then = x.then;
      if(typeof then === 'function'){
        then.call(
          x,
          y => { resolvePromise(promise2, y, resolve, reject); },
          r => { reject(r) }
        )
      }else{
        resolve(x);
      }
     }catch(err){
      reject(err);
     }
    // 此过程中需要使用try catch 包裹，如果有错误，则调用reject
  }else{
    // 如果`x`只是一个普通的值，则返回即可
    resolve(x);
  }

5. My Promise 的全部实现代码

let PENDING = 'PENDING';
let RESOLVE = 'RESOLVE';
let REJECT = 'REJECT';

const isPromise = (x) => {
    if (typeof x === 'object' && x !== null || typeof x === 'function') {
        if (typeof x.then === 'function') {
            return true;
        } else {
            return false;
        }
    } else {
        return false;
    }
}

const resolvePromise = (promise2, x, resolve, reject) => {
    // 判断promise2 和 x 是否相等，如果相等则会死循环
    if (promise2 === x) {
        return reject(new TypeError('Chaining cycle detected for promise #<Promise>'))
    }
    // 如果 x 是不为Null对象或者函数
    if (typeof x === 'object' && x !== null || typeof x === 'function') {
        let called;  // promise2的调用限制，防止多次调用成功和失败
        // 去取值的then，可能会出错，使用try
        try {
            let then = x.then;
            if (typeof then === 'function') {
                // 如果是函数，则去调用，调用要 call then user x
                // y => resolve , r => reject
                then.call(x, y => {
                    if (called) {
                        return;
                    }
                    called = true;
                    // resolve中很可能再次返回一个Promise实例
                    resolvePromise(promise2, y, resolve, reject);
                    // resolve(y)
                }, r => {
                    if (called) {
                        return;
                    }
                    called = true;
                    reject(r);
                })
            } else {
                if (called) {
                    return;
                }
                called = true;
                resolve(x);
            }
        } catch (error) {
            if (called) {
                return;
            }
            called = true;
            reject(error);
        }
    } else {
        // 否则就是普通值
        resolve(x);
    }
}

class Promise {
    constructor(execute = () => { }) {
        // Promise整体状态
        this.status = PENDING;
        // 成功回调
        this.onFulfilledCb = [];
        // 失败回调
        this.onREjectedCb = [];

        let resolve = (value) => {
            if (this.status === PENDING) {
                this.status = RESOLVE;
                this.value = value;
                this.onFulfilledCb.forEach(cb => cb());
            }
        }

        let reject = (value) => {
            if (this.status === PENDING) {
                this.status = REJECT;
                this.value = value;
                this.onREjectedCb.forEach(cb => cb());
            }
        }

        // 如果执行函数内有错误，则直接抛出
        try {
            execute(resolve, reject);
        } catch (error) {
            reject(error);
        }
    }
    then(onFulfilled, onRejected) {
        // 判断是不是函数，如果是函数，则往下执行，如果不是函数，则给一个函数，返回当前值
        onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : data => data;
        onRejected = typeof onRejected === 'function' ? onRejected : err => {
            throw err
        };

        let promise2 = new Promise((resolve, reject) => {
            // 同步执行
            // 成功执行
            if (this.status === RESOLVE) {
                /**
                 * 这段逻辑不可抽离出去，抽离出去会报错 cannot access 'promise2' before initialization
                 * 猜测可能在执行函数，将抽离出去的代码返回时，new Promise还没有执行完毕
                 */
                setTimeout(() => {
                    try {
                        let x = onFulfilled(this.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (error) {
                        reject(error)
                    }
                }, 0);
            }
            // 失败执行
            if (this.status === REJECT) {
                setTimeout(() => {
                    try {
                        let x = onRejected(this.value);
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (error) {
                        reject(error)
                    }
                }, 0);
            }

            // 异步执行
            if (this.status === PENDING) {
                this.onFulfilledCb.push(() => {
                    setTimeout(() => {
                        try {
                            let x = onFulfilled(this.value);
                            resolvePromise(promise2, x, resolve, reject);
                        } catch (error) {
                            reject(error)
                        }
                    }, 0);
                })
                this.onREjectedCb.push(() => {
                    setTimeout(() => {
                        try {
                            let x = onRejected(this.value);
                            resolvePromise(promise2, x, resolve, reject);
                        } catch (error) {
                            reject(error)
                        }
                    }, 0);
                })
            }
        })

        return promise2;
    }
    finally(cb) {
        return this.then(
            // 这里将 resolve.then返回，是为了保证 cb 中的代码执行完毕，返回then中返回的Promise
            data => this.resolve(cb(data)).then(() => data),
            err => this.resolve(cb(err)).then(() => { throw err; })
        )
    }
    static resolve = (arg) => {
        if (isPromise(arg)) {
            let promise2 = new Promise((resolve, reject) => {
                setTimeout(() => {
                    try {
                        let x = arg.then();
                        resolvePromise(promise2, x, resolve, reject);
                    } catch (error) {
                        reject(error);
                    }
                }, 0);
            })
            return promise2;
        } else {
            return new Promise(resolve => {
                resolve(arg);
            })
        }
    }
    static all = (values) => {
        return new Promise((resolve, reject) => {
            let arr = [];
            let index = 0;

            const pushIn = (key, data) => {
                arr[key] = data;
                index++;
                if (index === values.length) resolve(arr);
            }

            for (let i = 0; i < values.length; i++) {
                const item = values[i];
                if (isPromise(item)) {
                    item.then(data => {
                        pushIn(i, data);
                    }, reject);
                } else {
                    pushIn(i, item);
                }
            }
        })
    }

    static defer = () => {
        let dfd = {};
        dfd.promise = new Promise((resolve, reject) => {
            dfd.resolve = resolve;
            dfd.reject = reject;
        })
        return dfd;
    }
    static deferred = this.defer;

    static author = 'lxh'
}

Promise详解与实现（Promise/A+）

一、 什么是Promise？

二、Promise/A+规范

三、Promise的实现

1. Promise是具有then行为符合本规范的方法的对象或函数。

2. Promise States

3.1 then方法

3.2 then必须返回一个Promise

4. Promise Resolution Procedure

5. My Promise 的全部实现代码

一、什么是Promise？