最最最通俗易懂的promise手写系列（一）

先看一下这一次要讲的涉及到的promise的基础用法

let pms = new Promise((resolve, reject) => {
    setTimeout(() => {
        if (parseInt(Math.random()*10) > 5) {
             console.log('随机数大于5，算任务成功了')
             resolve('还能够传参哦')
        } else {
            console.log('随机数< 5，算任务失败了')
            reject('还能够传参哦< 5')
        }
    }, 1500)
  })

  pms.then((value) => {
    console.log('success', value)
  }, (reason) => {
    console.log('fail', reason)
  })
复制代码

1.5s后若是随机的数大于5走resolve()输出:
'随机数大于5，算任务成功了', 'success'，
小于5走reject()，输出:
'随机数< 5，算任务失败了', 'fail'.

咱们先写promise的这两个功能：

1. 构造函数的参数接受一个函数。
2. 函数在被调用的时候，会被promise传入两个参数resolve跟reject。

function Promise(executor){
    executor(resolve, reject)
    function resolve(){}
    function reject(){}
  }
复制代码

能够看到一new Promise就会执行传入的函数，也就是咱们起名为executor的函数.

3. 你们确定纳闷儿为啥要在executor里调用resolve或者reject,咱们里先上代码：

function Promise(executor) {
    let self = this;
    self.value = undefined;
    self.reason = undefined;
    self.status = 'pending';

    self.onFulFilledCallbacks = [];
    self.onRejectedCallbacks = [];

    function resolve(value) {
        if (self.status === 'pending') {
            self.value = value;
            self.status = 'resolved'

            self.onFulFilledCallbacks.forEach(onFulFilled => {
                onFulFilled()
            });
        }
    }
    function reject(reason) {
        if (self.status === 'pending') {
            self.reason = reason;
            self.status = 'rejected';
            self.onRejectedCallbacks.forEach(onRejected => {
                onRejected()
            });
        }
    }

    try {
        executor(resolve, reject);
    } catch (error) {
        reject(error)
    }
}

Promise.prototype.then = function (onFulFilled, onRejected) {
    if (this.status === 'pending') {
        this.onFulFilledCallbacks.push(() => {
            onFulFilled(this.value)
        }); 
        this.onRejectedCallbacks.push(() => {
            onRejected(this.reason)
        })
    } else if (this.status === 'resolved') {
        onFulFilled(this.value);
    } else if (this.status === 'rejected') {
        onRejected(this.reason);
    }
}
复制代码

• promise的三种状：等待pending,成功resolve,失败rejected.(说直接一点就是用来记录resolve或者reject是否已经调用，也就是常说的那个executor任务执行成功了仍是失败了)

• 这一次咱们新增了两个数组onFulFilledCallbacks、onRejectedCallbacks用来保存调用then的时候传的两个回调函数(固然若是在调用then的时候已经resolve或reject,那就直接执行传入的函数,不用保存了)，因此executor里必定会调用resolve或者reject中的一个，由于一个函数的执行不是(逻辑上成功)就是(逻辑上失败).对应咱们写的例子就是随机数不是大于5就是小于5.

• executor任务成功了确定有成功后的结果，失败了咱们确定也拿到失败的缘由。因此value与reason一个是用来保存成功的结果，一个是用来保存失败的缘由。

• ps：onFulFilledCallbacks、onRejectedCallbacks定为数组的缘由是为了这个功能:

pms.then((value) => {
    console.log('success1', value)
  }, (reason) => {
    console.log('fail1', reason)
  })
pms.then((value) => {
    console.log('success2', value)
  }, (reason) => {
    console.log('fail2', reason)
  })
//then屡次得把这些函数给存起来，到时候成功或者失败的时候，遍历依次执行~
复制代码

下一张咱们进入Promise最迷人的链式调用.
最最最通俗易懂的promise手写系列（二）- 链式调用