码迷,mamicode.com
首页 > Web开发 > 详细

用js实现promise

时间:2019-12-14 11:33:42      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:splay   缓存   end   ret   display   构造   变化   复用   变量   

/*
      自定义promise
        1. 执行MyPromise构造函数,要立即执行executor
        2. promise实例对象,内部有三种状态
          初始化 pending
          成功 resolved
          失败 rejected
          注意:状态只能修改一次
              如果executor内部出错了,promise状态改成rejected
        3. then方法的实现
          promise.then(onResolved, onRejected)      
            promise的状态是resolved时,异步调用onResolved函数
            promise的状态是rejected时,异步调用onRejected函数
            promise的状态是pending时,不调用函数。
              未来promise可能会变化,此时还是要异步调用相应的函数
        4. promise.then().then()  
          then方法返回值是promise,才能链式调用
          返回值promise对象的状态:
            1. 如果内部没有返回值 / 返回值不是promise 就是resolved
            2. 如果内部返回值是promise 看promise的状态
            3. 如果内部抛异常,就是rejected    
    */

    function MyPromise(executor) {
      // 初始化promise实例对象状态
      this._status = ‘pending‘;
      // 初始化promise实例对象结果值
      this._value = undefined;

      // 初始化存储 回调函数 的容器
      this._callbacks = {};

      // 缓存this --> promise实例对象
      const _that = this;

      try {
        // 放置可能出错代码
        // 一旦try里面代码出错了,就会中断try中代码运行,直接来到catch
        // 执行MyPromise构造函数,要立即执行executor
        executor(resolve, reject);
      } catch (e) {
        // 来到catch,说明executor函数内部出错了~
        // 将promise对象状态改成rejected
        reject(e);
      }

      // 定义resolve
      function resolve(value) {
        // 状态只能修改一次
        if (_that._status === ‘pending‘) {
          // 调用resolve方法将promise对象状态改成resolved状态
          _that._status = ‘resolved‘;
          _that._value = value;
          // 异步调用onResolved函数
          if (_that._callbacks.onResolved) {
            setTimeout(() => {
              _that._callbacks.onResolved(value)
            })
          }
        }
      }

      // 定义reject
      function reject(reason) {
        if (_that._status === ‘pending‘) {
          // 调用reject方法将promise对象状态改成rejected状态
          _that._status = ‘rejected‘;
          _that._value = reason;
          // 异步调用onRejected函数
          if (_that._callbacks.onRejected) {
            setTimeout(() => {
              _that._callbacks.onRejected(reason)
            })
          }
        }
      }
    }

    MyPromise.prototype.then = function (onResolved, onRejected) {
      const _that = this;

      // 如果onResolved存在,不变
      // 如果onResolved不存在,说明catch触发的。 如果是成功状态promise,保证返回值还是一个成功状态promise
      onResolved = onResolved ? onResolved : (value) => value;
      // then方法一旦只传一个参数,并且是失败状态promise,保证返回值 是 失败状态promise内部的值
      onRejected = onRejected ? onRejected : (reason) => {
        throw reason
      };

      // 为了将来作为promise对象使用
      let promise = null;
      // this指向promise实例对象
      if (this._status === ‘resolved‘) {
        // 说明promise对象的状态是resolved
        // 异步调用onResolved函数
        promise = new MyPromise(function (resolve, reject) {
          setTimeout(() => {
            doResolve(onResolved, _that._value, resolve, reject);
          })
        })
      } else if (this._status === ‘rejected‘) {
        promise = new MyPromise(function (resolve, reject) {
          setTimeout(() => {
            doResolve(onRejected, _that._value, resolve, reject);
          })
        })
      } else {
        // 说明promise对象的状态是pending状态
        // 将回调函数存在this上
        promise = new MyPromise(function (resolve, reject) {
          // _that是p1, 外面promise是p2
          // p1调用onResolved/onRejected回调时,要更新p2的状态
          _that._callbacks.onResolved = function (value) {
            doResolve(onResolved, value, resolve, reject);
          };
          _that._callbacks.onRejected = function (reason) {
            doResolve(onRejected, reason, resolve, reject);
          };
        })
      }
      // 为了链式调用
      return promise;
    }

    // 定义函数复用代码
    function doResolve(onFn, value, resolve, reject) {
      try {
        const result = onFn(value);
        if (result instanceof MyPromise) {
          result.then(resolve, reject)
        } else {
          resolve(result);
        }
      } catch (e) {
        reject(e);
      }
    }

    MyPromise.prototype.catch = function (onRejected) {
      return this.then(undefined, onRejected);
    }

    MyPromise.prototype.finally = function (onResolved) {
      const _that = this;
      return new Promise((resolve, reject) => {
        if (_that._status === ‘pending‘) {
          const callback = function (value) {
            doResolve(onResolved, value, resolve, reject)
          };
          _that._callbacks.onResolved = callback;
          _that._callbacks.onRejected = callback;
        } else {
          doResolve(onResolved, _that._value, resolve, reject);
        }
      })
    }

    // 返回一个成功状态promise
    MyPromise.resolve = function (value) {
      return new MyPromise((resolve, reject) => {
        resolve(value);
      })
    }
    // 返回一个失败状态promise
    MyPromise.reject = function (reason) {
      return new MyPromise((resolve, reject) => {
        reject(reason);
      })
    }
    // 接受一个数组(数组中放置n个promise对象),只有所有promise对象都成成功状态,方法返回值的promise才是成功
    // 只要有一个失败,方法返回值的promise就失败
    MyPromise.all = function (promises) {
      // promises的长度
      const promiseLength = promises.length;
      // 定义标识变量: promise对象成功的数量
      let resolvedCount = 0;
      // 成功的结果值
      const resolvedValues = [];
      return new MyPromise((resolve, reject) => {
        for (let i = 0; i < promiseLength; i++) {
          const promise = promises[i];
          // 看promise的状态
          promise.then((value) => {
            resolvedCount++;
            // 不能用push,输出顺序会乱
            // 使用下标,才能保证顺序ok
            resolvedValues[i] = value;
            if (resolvedCount === promiseLength) {
              // 说明都成功了
              resolve(resolvedValues);
            }
          }, reject)
        }
      })
    }

    const promise = new MyPromise((resolve, reject) => {
      console.log(‘executor函数执行了~‘);
      setTimeout(() => {
        // resolve(111);
        reject(222);
      }, 2000)
    })

    promise
      .then(() => {
        console.log(111);
        // 当then方法没有传入第二个回调。
        // 那么一旦接受的promise对象的状态是失败状态,返回值也是失败状态
      })
      .catch((reason) => {
        console.log(222, reason);
        // return Promise.reject();
        // throw new Error(111)
        return 333;
      })
      .then((value) => {
        console.log(333, value);
      })
      .catch(() => {
        console.log(444);
      })

用js实现promise

标签:splay   缓存   end   ret   display   构造   变化   复用   变量   

原文地址:https://www.cnblogs.com/wangsai-666/p/12038399.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!