zoukankan      html  css  js  c++  java
  • Promise 基本用法及实现原理

    Promise 基本用法及实现原理

    一、promise 是什么?

    Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。Promise 是一个对象,从它可以获取异步操作的消息。

    1.1、promise的两个特点:

    (1)对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。

    (2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。

    promise的基本用法:

    ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。

    const promise = new Promise(function(resolve, reject) {
     if (/* 异步操作成功 */){
        resolve(value);
      } else {
        reject(error);
      }
    });

    Promise实例生成以后,可以用then方法分别指定resolved状态和rejected状态的回调函数。

    promise.then(function(value) {
      // success
    }, function(error) {
      // failure
    });

    then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。其中,第二个函数是可选的,不一定要提供。

    function timeout(ms) {
      return new Promise((resolve, reject) => {
        setTimeout(resolve, ms, 'done');
      });
    }
    
    timeout(100).then((value) => {
      console.log(value);
    });

    Promise 新建后就会立即执行。

    let promise = new Promise(function(resolve, reject) {
      console.log('Promise');
      resolve();
    });
    
    promise.then(function() {
      console.log('resolved.');
    });
    
    console.log('Hi!');
    
    // Promise
    // Hi!
    // resolved

    下面是一个用Promise对象实现的 Ajax 操作的例子。

    const getJSON = function(url) {
      const promise = new Promise(function(resolve, reject){
        const handler = function() {
          if (this.readyState !== 4) {
            return;
          }
          if (this.status === 200) {
            resolve(this.response);
          } else {
            reject(new Error(this.statusText));
          }
        };
        const client = new XMLHttpRequest();
        client.open("GET", url);
        client.onreadystatechange = handler;
        client.responseType = "json";
        client.setRequestHeader("Accept", "application/json");
        client.send();
    
      });
    
      return promise;
    };
    
    getJSON("/posts.json").then(function(json) {
      console.log('Contents: ' + json);
    }, function(error) {
      console.error('出错了', error);
    });
    const p1 = new Promise(function (resolve, reject) {
      setTimeout(() => reject(new Error('fail')), 3000)
    })
    
    const p2 = new Promise(function (resolve, reject) {
      setTimeout(() => resolve(p1), 1000)
    })
    
    p2
      .then(result => console.log(result))
      .catch(error => console.log(error))
    // Error: fail

    上面代码中,p1是一个 Promise,3 秒之后变为rejectedp2的状态在 1 秒之后改变,resolve方法返回的是p1。由于p2返回的是另一个 Promise,导致p2自己的状态无效了,由p1的状态决定p2的状态。所以,后面的then语句都变成针对后者(p1)。又过了 2 秒,p1变为rejected,导致触发catch方法指定的回调函数。

    1.2、Promise.prototype.then()

    promise 实例具有then方法,也就是说,then方法是定义在原型对象Promise.prototype上的。它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过,then方法的第一个参数是resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数

    getJSON("/posts.json").then(function(json) {
      return json.post;
    }).then(function(post) {
      // ...
    });
    getJSON("/post/1.json").then(
      post => getJSON(post.commentURL)
    ).then(
      comments => console.log("resolved: ", comments),
      err => console.log("rejected: ", err)
    );

    上面代码中,第一个then方法指定的回调函数,返回的是另一个Promise对象。这时,第二个then方法指定的回调函数,就会等待这个新的Promise对象状态发生变化。如果变为resolved,就调用第一个回调函数,如果状态变为rejected,就调用第二个回调函数。

    1.3、Promise.prototype.catch()

    Promise.prototype.catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名,用于指定发生错误时的回调函数

    p.then((val) => console.log('fulfilled:', val))
      .catch((err) => console.log('rejected', err));
    
    // 等同于
    p.then((val) => console.log('fulfilled:', val))
      .then(null, (err) => console.log("rejected:", err));

    1.4、Promise.all()

    方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。

    const p = Promise.all([p1, p2, p3]);

    上面代码中,Promise.all()方法接受一个数组作为参数,p1、p2、p3都是 Promise 实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为 Promise 实例,再进一步处理。另外,Promise.all()方法的参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例。

    p的状态由p1、p2、p3决定,分成两种情况。

    (1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。

    (2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

    const p1 = new Promise((resolve, reject) => {
      resolve('hello');
    })
    .then(result => result)
    .catch(e => e);
    
    const p2 = new Promise((resolve, reject) => {
      throw new Error('报错了');
    })
    .then(result => result)
    .catch(e => e);
    
    Promise.all([p1, p2])
    .then(result => console.log(result))
    .catch(e => console.log(e));
    // ["hello", Error: 报错了]

    上面代码中,p1resolvedp2首先会rejected,但是p2有自己的catch方法,该方法返回的是一个新的 Promise 实例,p2指向的实际上是这个实例。该实例执行完catch方法后,也会变成resolved,导致Promise.all()方法参数里面的两个实例都会resolved,因此会调用then方法指定的回调函数,而不会调用catch方法指定的回调函数。

    如果p2没有自己的catch方法,就会调用Promise.all()catch方法。

    1.5、Promise.race()

    方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。

     

    const p = Promise.race([p1, p2, p3]);

    上面代码中,只要p1p2p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数。

    const p = Promise.race([
      fetch('/resource-that-may-take-a-while'),
      new Promise(function (resolve, reject) {
        setTimeout(() => reject(new Error('request timeout')), 5000)
      })
    ]);
    
    p
    .then(console.log)
    .catch(console.error);

    上面代码中,如果 5 秒之内fetch方法无法返回结果,变量p的状态就会变为rejected,从而触发catch方法指定的回调函数。

    二、Promise实现原理

    2.1、promise基本结构

    new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('FULFILLED')
      }, 1000)
    })

    构造函数Promise必须接受一个函数作为参数,我们称该函数为handlehandle又包含resolvereject两个参数,它们是两个函数。

    // 判断变量否为function
    const isFunction = variable => typeof variable === 'function'

    首先,我们定义一个名为 MyPromise 的 Class,它接受一个函数 handle 作为参数

    class MyPromise {
      constructor (handle) {
        if (!isFunction(handle)) {
          throw new Error('MyPromise must accept a function as a parameter')
        }
      }
    }

    2.2、Promise 状态和值

    状态只能由 Pending 变为 Fulfilled 或由 Pending 变为 Rejected ,且状态改变之后不会在发生变化,会一直保持这个状态。

    / 定义Promise的三种状态常量
    const PENDING = 'PENDING'
    const FULFILLED = 'FULFILLED'
    const REJECTED = 'REJECTED'

    再为 MyPromise 添加状态和值,并添加状态改变的执行逻辑

    class MyPromise {
      constructor (handle) {
        if (!isFunction(handle)) {
          throw new Error('MyPromise must accept a function as a parameter')
        }
        // 添加状态
        this._status = PENDING
        // 添加状态
        this._value = undefined
        // 执行handle
        try {
          handle(this._resolve.bind(this), this._reject.bind(this)) 
        } catch (err) {
          this._reject(err)
        }
      }
      // 添加resovle时执行的函数
      _resolve (val) {
        if (this._status !== PENDING) return
        this._status = FULFILLED
        this._value = val
      }
      // 添加reject时执行的函数
      _reject (err) { 
        if (this._status !== PENDING) return
        this._status = REJECTED
        this._value = err
      }
    }

    2.3、Promise 的 then 方法

    Promise 对象的 then 方法接受两个参数:

    参数可选

    onFulfilled 和 onRejected 都是可选参数。

    如果 onFulfilled 或 onRejected 不是函数,其必须被忽略
    onFulfilled 特性

        如果 onFulfilled 是函数:

    当 promise 状态变为成功时必须被调用,其第一个参数为 promise 成功状态传入的值( resolve 执行时传入的值)
    在 promise 状态改变前其不可被调用
    其调用次数不可超过一次
    onRejected 特性
        如果 onRejected 是函数:

    当 promise 状态变为失败时必须被调用,其第一个参数为 promise 失败状态传入的值( reject 执行时传入的值)
    在 promise 状态改变前其不可被调用
    其调用次数不可超过一次

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

    当 promise 成功状态时,所有 onFulfilled 需按照其注册顺序依次回调
    当 promise 失败状态时,所有 onRejected 需按照其注册顺序依次回调

    返回

    then 方法必须返回一个新的 promise 对象

    promise2 = promise1.then(onFulfilled, onRejected);

    因此 promise 支持链式调用

    promise1.then(onFulfilled1, onRejected1).then(onFulfilled2, onRejected2);

    因此 promise 支持链式调用

    promise1.then(onFulfilled1, onRejected1).then(onFulfilled2, onRejected2);
    这里涉及到 Promise 的执行规则,包括“值的传递”和“错误捕获”机制:
    1、如果 onFulfilled 或者 onRejected 返回一个值 x ,则运行下面的 Promise 解决过程:[[Resolve]](promise2, x)

    若 x 不为 Promise ,则使 x 直接作为新返回的 Promise 对象的值, 即新的onFulfilled 或者 onRejected 函数的参数.
    若 x 为 Promise ,这时后一个回调函数,就会等待该 Promise 对象(即 x )的状态发生变化,才会被调用,并且新的 Promise 状态和 x 的状态相同

    let promise1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, 1000)
    })
    promise2 = promise1.then(res => {
      // 返回一个普通值
      return '这里返回一个普通值'
    })
    promise2.then(res => {
      console.log(res) //1秒后打印出:这里返回一个普通值
    })
    let promise1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, 1000)
    })
    promise2 = promise1.then(res => {
      // 返回一个Promise对象
      return new Promise((resolve, reject) => {
        setTimeout(() => {
         resolve('这里返回一个Promise')
        }, 2000)
      })
    })
    promise2.then(res => {
      console.log(res) //3秒后打印出:这里返回一个Promise
    })

    2、如果 onFulfilled 或者onRejected 抛出一个异常 e ,则 promise2 必须变为失败(Rejected),并返回失败的值 e,例如:

    let promise1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('success')
      }, 1000)
    })
    promise2 = promise1.then(res => {
      throw new Error('这里抛出一个异常e')
    })
    promise2.then(res => {
      console.log(res)
    }, err => {
      console.log(err) //1秒后打印出:这里抛出一个异常e
    })

    3、如果onFulfilled 不是函数且 promise1 状态为成功(Fulfilled), promise2 必须变为成功(Fulfilled)并返回 promise1 成功的值,例如:

    let promise1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('success')
      }, 1000)
    })
    promise2 = promise1.then('这里的onFulfilled本来是一个函数,但现在不是')
    promise2.then(res => {
      console.log(res) // 1秒后打印出:success
    }, err => {
      console.log(err)
    })

    4、如果 onRejected 不是函数且 promise1 状态为失败(Rejected),promise2必须变为失败(Rejected) 并返回 promise1 失败的值,例如

    let promise1 = new Promise((resolve, reject) => {
      setTimeout(() => {
        reject('fail')
      }, 1000)
    })
    promise2 = promise1.then(res => res, '这里的onRejected本来是一个函数,但现在不是')
    promise2.then(res => {
      console.log(res)
    }, err => {
      console.log(err)  // 1秒后打印出:fail
    })

    根据上面的规则,我们来为 完善 MyPromise

    修改 constructor : 增加执行队列

    由于 then 方法支持多次调用,我们可以维护两个数组,将每次 then 方法注册时的回调函数添加到数组中,等待执行

    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)
      }
    }


    添加then方法

    首先,then 返回一个新的 Promise 对象,并且需要将回调函数加入到执行队列中

    // 添加then方法
    then (onFulfilled, onRejected) {
      const { _value, _status } = this
      switch (_status) {
        // 当状态为pending时,将then方法回调函数加入执行队列等待执行
        case PENDING:
          this._fulfilledQueues.push(onFulfilled)
          this._rejectedQueues.push(onRejected)
          break
        // 当状态已经改变时,立即执行对应的回调函数
        case FULFILLED:
          onFulfilled(_value)
          break
        case REJECTED:
          onRejected(_value)
          break
      }
      // 返回一个新的Promise对象
      return new MyPromise((onFulfilledNext, onRejectedNext) => {
      })
    }

    那返回的新的 Promise 对象什么时候改变状态?改变为哪种状态呢?

    根据上文中 then 方法的规则,我们知道返回的新的 Promise 对象的状态依赖于当前 then 方法回调函数执行的情况以及返回值,例如 then 的参数是否为一个函数、回调函数执行是否出错、返回值是否为 Promise 对象。

    我们来进一步完善 then 方法:


    // 添加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
        }
      })
    }
    这一部分可能不太好理解,读者需要结合上文中 then 方法的规则来细细的分析。

    接着修改 _resolve 和 _reject :依次执行队列中的函数

    当 resolve 或 reject 方法执行时,我们依次提取成功或失败任务队列当中的函数开始执行,并清空队列,从而实现 then 方法的多次调用,实现的代码如下:

    // 添加resovle时执行的函数
    _resolve (val) {
      if (this._status !== PENDING) return
      // 依次执行成功队列中的函数,并清空队列
      const run = () => {
        this._status = FULFILLED
        this._value = val
        let cb;
        while (cb = this._fulfilledQueues.shift()) {
          cb(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)
    }

    上面代码中,p1p2 都是 Promise 的实例,但是 p2resolve方法将 p1 作为参数,即一个异步操作的结果是返回另一个异步操作。

    注意,这时 p1 的状态就会传递给 p2,也就是说,p1 的状态决定了 p2 的状态。如果 p1 的状态是Pending,那么 p2 的回调函数就会等待 p1 的状态改变;如果 p1 的状态已经是 Fulfilled 或者 Rejected,那么 p2 的回调函数将会立刻执行。

    我们来修改_resolve来支持这样的特性

      // 添加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)
      }

    这样一个Promise就基本实现了,现在我们来加一些其它的方法

    2.4、catch 方法

    相当于调用 then 方法, 但只传入 Rejected 状态的回调函数

    // 添加catch方法
    catch (onRejected) {
      return this.then(undefined, onRejected)
    }

    2.4、静态 resolve 方法

    // 添加静态resolve方法
    static resolve (value) {
      // 如果参数是MyPromise实例,直接返回这个实例
      if (value instanceof MyPromise) return value
      return new MyPromise(resolve => resolve(value))
    }

    2.5、静态 reject 方法

    // 添加静态reject方法
    static reject (value) {
      return new MyPromise((resolve ,reject) => reject(value))
    }

    2.6、静态 all 方法

    // 添加静态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)
          })
        }
      })
    }

    2.7、静态 race 方法

    // 添加静态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)
          })
        }
      })
    }

    2.8、finally 方法

    finally 方法用于指定不管 Promise 对象最后状态如何,都会执行的操作
    finally (cb) {
      return this.then(
        value  => MyPromise.resolve(cb()).then(() => value),
        reason => MyPromise.resolve(cb()).then(() => { throw reason })
      );
    };

    这样一个完整的 Promsie 就实现了,大家对 Promise 的原理也有了解,可以让我们在使用Promise的时候更加清晰明了。

    完整代码如下

      // 判断变量否为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 })
          );
        }
      }

    参考链接:

    https://es6.ruanyifeng.com/#docs/promise

    https://juejin.im/post/5b83cb5ae51d4538cc3ec354#heading-1

  • 相关阅读:
    PHP中Foreach在引用时的陷阱 j神
    Yii中Session和cookie的用法 j神
    如何解决web大流量、高并发的问题 j神
    PHP无限级分类的递归算法 j神
    关于breadcrumbs j神
    MySQL索引分析和优化 j神
    Yii笔记 j神
    YII中的URL Management j神
    forward与redirect的区别 j神
    网络编程学习笔记
  • 原文地址:https://www.cnblogs.com/pikachuworld/p/13061818.html
Copyright © 2011-2022 走看看