带你实现一个Promise

·  阅读 1426

前言

此篇文章主要是用来加深自己对promise原理的理解。

什么是Promise

Promise是JS解决异步编程的一种方式,是ES6推广的一个新概念。所谓的Promise相当于一个状态机,里面承载着未来某一个时刻所发生的状态。

Promise的状态

Promise的有三种状态:

  • pending: 一个promise在resolve或者reject前就处于这个状态。
  • fulfilled: 一个promise被resolve后就处于fulfilled状态,这个状态不能再改变,而且必须拥有一个不可变的值(value)。
  • rejected: 一个promise被reject后就处于rejected状态,这个状态也不能再改变,而且必须拥有一个不可变的拒绝原因(reason)。

Promise的特点是什么

  • 对象的状态不受外界的影响,只有异步结果才能决定对象的状态
  • 对象的状态一旦发生改变,就不会再改变了。任何时刻都可以拿到此结果

Promise解决了什么问题

Promise和回调函数是2个概念,Promise是新的概念而不是回调函数的扩展。

  • 使用Promise解决了回调地狱的问题

    Promise通过链式调用解决了回调函数层层嵌套的问题,

  • 使用Promise处理异步编程,不会使得代码逻辑跳跃

    最原始的回调函数处理异步编程使得代码跳跃,因为当异步有了结果才会去执行回调函数,那么callback的执行和定义可能并不在同一个地方。使得代码的可读性没那么清晰。而Promsie通过.then函数调用就可以解决这样的逻辑跳跃问题。

  • 使用Promsie可以捕获处理错误信息

    最原始的回调函数处理异步编程无法实现错误信息的捕获,那么通过使用Promise的.catch方法或者在.then的第二个参数(回调函数)来处理错误信息。

Promsie实现思路分析

在实现Promsie的过程当中,需要先了解Promises/A+规范,这里可查看Promises/A+规范翻译

Promise的基本结构

let p=new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('FULFILLED');
  }, 1000)
}).then(res=>{
	console.log(res);
}).catch(err=>{
	console.log(err);
})
复制代码

如上是使用ES6中Promise的基本结构,可见Promise是一个构造函数或者是一个类,传入一个回调函数,回调函数接收resolve和reject两个方法;并且Promise有.then和.catch基本这些基本的方法。

then方法

promise.then(onFulfilled, onRejected)
复制代码

一个Promise必须拥有then方法,而且then方法接收2个可选参数onFulfilled和onRejected。

  • onFulfilled 用来当状态值是Fulfilled接受的处理函数。
  • onRejected 用来处理状态值是Rejected拒绝的处理函数。
  • then 方法可以被同一个 promise 调用多次
    • 当 promise 成功执行时,所有 onFulfilled 需按照其注册顺序依次回调
    • 当 promise 被拒绝执行时,所有的 onRejected 需按照其注册顺序依次回调
  • then 方法返回一个 promise 对象。

catch方法

一个Promise必须拥有catch方法,用来处理拒绝的情况。

promise.catch(onRejected)
复制代码

Promise的状态值分析

Promise有三个状态值,所以先定义三个状态常量。一个Promise的当前状态必须是等待状态(Pending), 接受状态(Fulfilled) 和 拒绝状态(Rejected)当中的一种。

// 先定义三个常量表示状态
  const PENDING = "pending";
  const FULFILLED = "fulfilled";
  const REJECTED = "rejected";
复制代码
  • 当Promsie的状态值是pending时,那么它有可能变成Fulfilled或者是Rejected。
  • 当Promise的状态是Fulfilled或者是Rejected,那么就无法改变它的值了。
  • 当状态值为rejected时,有一个不可变的拒绝原因。

Promise封装

MyPromise接收一个fn(函数),执行这个fn,并且将resolve和reject传递出去。

  • 当调用resolve时将状态值PENDING变成FULFILLED,并且接收value值(成功的值)
  • 当调用reject时将状态值PENDING变成REJECTED,并且接收reason值(失败拒绝的值)

MyPromise通过使用try--catch来捕获错误信息。

function MyPromise(fn) {
    this.status = PENDING; // 初始状态为pending
    this.value = null; // 初始化value
    this.reason = null; // 初始化reason
    // 存一下this,以便resolve和reject里面访问
    var that = this;
    // resolve方法参数是value
    function resolve(value) {
        if (that.status === PENDING) {
            that.status = FULFILLED;
            that.value = value;
        }
    }

    // reject方法参数是reason
    function reject(reason) {
        if (that.status === PENDING) {
            that.status = REJECTED;
            that.reason = reason;
        }
    }
    try {
        fn(resolve, reject);
    } catch (error) {
        reject(error);
    }
}
复制代码

接下来实现一个then函数:

根据上面Promises/A+规范的分析可见,then方法返回一个 promise ,并且then方法可以处理不同状态值的情况。想想当我们使用promise时,如果成功之后就会调用then的onFulfilled方法,当失败之后就会调用then的onRejected方法。所以,在大体上能确定的是有条件分支是当状态值为FULFILLED和REJECTED这两种情况,在想想状态值不同的时候,是如何调用onFulfilled方法和onRejected方法。

在调用onFulfilled方法和onRejected方法之前会去判断onFulfilled方法和onRejected方法是不是一个函数,如果是才调用这个函数,不是则直接返回值。(值是promise1的值是根据成功或者失败决定返回reason还是value)。其实就是相当于将promise1的值穿透到promise2。

那如果onFulfilled方法和onRejected方法是函数并且有自己的返回值,那么我们就要根据Promises/A+规范进行编码处理。

在将Promises/A+规范转换成代码之前,我们先看看如下的代码:

new Promise(fn).then(onFulfilled, onRejected);
复制代码

当我们以如上代码使用promise时,Promise的状态值还是 PENDING (then方法和Promise构造函数一起执行,根本不知道什么时候状态值发生改变)。这时候肯定不能立即调onFulfilled或者onRejected的,因为fn到底成功还是失败还不知道。那什么时候知道fn成功还是失败呢?答案是fn里面主动调resolve或者reject的时候。所以要先收集onFulfilled和onRejected方法(肯定在then方法里面去收集);如果状态值还是PENDING,应该将onFulfilled和onRejected两个回调存起来,等到fn有了结论,resolve或者reject的时候再来调用对应的代码(肯定在状态值发生变化的地方去调用函数)。因为后面then还有链式调用,会有多个onFulfilled和onRejected,这里用两个数组将他们存起来,等resolve或者reject的时候将数组里面的全部方法拿出来执行一遍。

这个过程像极了订阅发布模式。那这样的话then方法里面肯定需要多一条状态值为PENDING的条件分支。

所以新增MyPromise函数的代码如下:

function MyPromise(fn) {
    ...
    // 构造函数里面添加两个数组存储成功和失败的回调
    + this.onFulfilledCallbacks = [];
    + this.onRejectedCallbacks = [];

    // 存一下this,以便resolve和reject里面访问
    var that = this;
    // resolve方法参数是value
    function resolve(value) {
        if (that.status === PENDING) {
            ...
            // resolve里面将所有成功的回调拿出来执行
           + that.onFulfilledCallbacks.forEach((callback) => {
           +    callback(that.value);
           + });
        }
    }

    // reject方法参数是reason
    function reject(reason) {
        if (that.status === PENDING) {
         	...
            // resolve里面将所有失败的回调拿出来执行
           + that.onRejectedCallbacks.forEach((callback) => {
           +     callback(that.reason);
           + });
        }
    }
	...
}
复制代码

回到当onFulfilled方法和onRejected方法是函数并且有自己的返回值时的情况,这时候就需要关注Promises/A+规范的Promise 解决过程,将 Promise 解决过程转成代码如下:

function resolvePromise(promise, x, resolve, reject) {
  // 如果 promise 和 x 指向同一对象,以 TypeError 为据因拒绝执行 promise
  // 这是为了防止死循环
  if (promise === x) {
      return reject(
          new TypeError("The promise and the return value are the same")
      );
  }

  if (x instanceof MyPromise) {
      // 如果 x 为 Promise ,则使 promise 接受 x 的状态
      // 也就是继续执行x,如果执行的时候拿到一个y,还要继续解析y
      // 这个if跟下面判断then然后拿到执行其实重复了,可有可无
      x.then(function(y) {
          resolvePromise(promise, y, resolve, reject);
      }, reject);
  }
  // 如果 x 为对象或者函数
  else if (typeof x === "object" || typeof x === "function") {
      // 这个坑是跑测试的时候发现的,如果x是null,应该直接resolve
      if (x === null) {
          return resolve(x);
      }

      try {
          // 把 x.then 赋值给 then
          var then = x.then;
      } catch (error) {
          // 如果取 x.then 的值时抛出错误 e ,则以 e 为据因拒绝 promise
          return reject(error);
      }

      // 如果 then 是函数
      if (typeof then === "function") {
          var called = false;
          // 将 x 作为函数的作用域 this 调用之
          // 传递两个回调函数作为参数,第一个参数叫做 resolvePromise ,第二个参数叫做 rejectPromise
          // 名字重名了,我直接用匿名函数了
          try {
              then.call(
                  x,
                  // 如果 resolvePromise 以值 y 为参数被调用,则运行 [[Resolve]](promise, y)
                  function(y) {
                      // 如果 resolvePromise 和 rejectPromise 均被调用,
                      // 或者被同一参数调用了多次,则优先采用首次调用并忽略剩下的调用
                      // 实现这条需要前面加一个变量called
                      if (called) return;
                      called = true;
                      resolvePromise(promise, y, resolve, reject);
                  },
                  // 如果 rejectPromise 以据因 r 为参数被调用,则以据因 r 拒绝 promise
                  function(r) {
                      if (called) return;
                      called = true;
                      reject(r);
                  }
              );
          } catch (error) {
              // 如果调用 then 方法抛出了异常 e:
              // 如果 resolvePromise 或 rejectPromise 已经被调用,则忽略之
              if (called) return;

              // 否则以 e 为据因拒绝 promise
              reject(error);
          }
      } else {
          // 如果 then 不是函数,以 x 为参数执行 promise
          resolve(x);
      }
  } else {
      // 如果 x 不为对象或者函数,以 x 为参数执行 promise
      resolve(x);
  }
}
复制代码

在完成Promise 解决过程之后,我们还需讨论onFulfilled 和 onRejected 方法在如何执行?是同步执行还是异步执行呢?

在规范中讲到:实践中要确保 onFulfilled 和 onRejected 方法异步执行,且应该在 then 方法被调用的那一轮事件循环之后的新执行栈中执行。

所以在我们执行onFulfilled 和 onRejected的时候都应该包到setTimeout里面去。那么then 方法的实现代码如下:

MyPromise.prototype.then = function(onFulfilled, onRejected) {
      // 如果onFulfilled不是函数,给一个默认函数,返回value
      var realOnFulfilled = onFulfilled;
      // 如果onRejected不是函数,给一个默认函数,返回reason的Error
      var realOnRejected = onRejected;
      var that = this; // 保存一下this
      if (this.status === FULFILLED) {
          var promise2 = new MyPromise(function(resolve, reject) {
              setTimeout(function() {
                  try {
                      if (typeof onFulfilled !== "function") {
                          resolve(that.value);
                      } else {
                          var x = realOnFulfilled(that.value);
                          resolvePromise(promise2, x, resolve, reject);
                      }
                  } catch (error) {
                      reject(error);
                  }
              }, 0);
          });
          return promise2;
      }

      if (this.status === REJECTED) {
          var promise2 = new MyPromise(function(resolve, reject) {
              setTimeout(function() {
                  try {
                      if (typeof onRejected !== "function") {
                          reject(that.reason);
                      } else {
                          var x = realOnRejected(that.reason);
                          resolvePromise(promise2, x, resolve, reject);
                      }
                  } catch (error) {
                      reject(error);
                  }
              }, 0);
          });
          return promise2;
      }

      // 如果还是PENDING状态,将回调保存下来
      if (this.status === PENDING) {
          var promise2 = new MyPromise(function(resolve, reject) {
              that.onFulfilledCallbacks.push(function() {
                  setTimeout(function() {
                      try {
                          if (typeof onFulfilled !== "function") {
                              resolve(that.value);
                          } else {
                              var x = realOnFulfilled(that.value);
                              resolvePromise(promise2, x, resolve, reject);
                          }
                      } catch (error) {
                          reject(error);
                      }
                  }, 0);
              });
              that.onRejectedCallbacks.push(function() {
                  setTimeout(function() {
                      try {
                          if (typeof onRejected !== "function") {
                              reject(that.reason);
                          } else {
                              var x = realOnRejected(that.reason);
                              resolvePromise(promise2, x, resolve, reject);
                          }
                      } catch (error) {
                          reject(error);
                      }
                  }, 0);
              });
          });

          return promise2;
      }
};
复制代码

其他Promise方法

根据ES6的文档Promise 对象的用法手写Promise的其他方法,这里先拎出来各方法的特点再编写代码。

1.MyPromise.resolve特点

  • 参数是一个 Promise 实例则返回该实例
  • 参数不是Promise 实例则包装成Promise对象并且直接resolve参数
MyPromise.resolve = function(parameter) {
    if (parameter instanceof MyPromise) {
        return parameter;
    }

    return new MyPromise(function(resolve) {
        resolve(parameter);
    });
};
复制代码
  1. MyPromise.reject特点
  • 返回一个新的 Promise 实例,该实例的状态为reject,并且据因为传入的参数
 MyPromise.reject = function(reason) {
    return new MyPromise(function(resolve, reject) {
        reject(reason);
    });
};

复制代码

3.MyPromise.all特点

  • 传入一个数组作为参数,数组的每一个元素都是一个promise实例
  • 返回一个新的promise,并且promise的结果值是一个数组,数组中的值为参数中每一个promise的返回值并且一一对应的关系
  • 只要参数中的promise实例一个发生错误了,那么这个新的promise状态值就是拒绝状态
MyPromise.all = function(args=[]) {
    let count=0;
    let callbackArr=[];
    return new Promise((resolve,reject)=>{
      for(let i=0;i<args.length;i++){
       // (function(i){
          args[i].then(res=>{
            callbackArr[i]=res;
            count++;
            if(count==args.length){
              return resolve(callbackArr);
            }
          }).catch(err=>{
            return reject(err);
          })
        //})(i)
      }
    })
};

复制代码

MyPromise.prototype.catch 特点

  • .catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名,用于指定发生错误时的回调函数。
 MyPromise.prototype.catch = function(onRejected) {
     this.then(null, onRejected);
 };

复制代码

其他的方法小伙伴自行实现,抓住特点,我觉得实现其他就不会很难了。

总结

知原理知天下,当会使用一个语法的时候多考虑背后的实现思想原理,会加深对此语法的理解。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改