亲宝软件园·资讯

展开

70行实现Promise核心源码

speanut 人气:2

70行实现Promise核心源码

前言:

​ 一直以来都是只会调用Promise的API,而且调API还是调用axios封装好的Promise,太丢人了!!!没有真正的去了解过它的原理是如何实现的,自己也看过很多博主实现的Promise,但总觉得用原型链的OOP晦涩难懂。

个人的理解:如果带着观察者模式的想法来理解Promise源码,你就会发现Promise本身其实一种微任务的观察者模式,一个异步任务的完成,res/rej的状态回调hook => 通知所有then()订阅的promise对象。promise只是将观察者模式运用到微任务。让promise对象能够具有很高的优先级。说到底还是一种解藕的设计模式。

promise是诞生的原因?

​ 在了解Promise之前,我觉得有必要去了解一下Promise诞生的原因。 直接就那上面的axios来说吧,以前没有出现axios的时候,大家是怎么去与后台接口做交互的呢? 我当时是用jQuery封装好的AJAX去做的。下面有一个例子

$.ajax({
    type: 'POST',                     //GET or POST
    url: "jquery-ajax",               
    cache: false,                     
    data: {todo:"ajaxexample1"},      
    success: functionSucceed,         
    error: functionFailed,            
    statusCode: {                     
      404: function() {
        alert("page not found");
      }
    }
});

如果是单独的一个请求还好,但是如果得发送两个相互依赖的请求呢?这时候就会出现回调地狱的问题,不能自拔。以下就是一个简单的例子。

a(function (result1) {
  b(result1,function (result2) {
    c(result2, function (result3) {
      d(result3, function (result4) {
        e(result4, function (result5) {
          console.log(result5)
        })
      })
    })
  })
})

假如说让你去维护一个这样的代码... 害怕的兄弟萌把害怕打在评论区[doge]。上面的代码有什么问题呢?

  • 嵌套调用,下面的任务依赖上个任务的请求结果。如果2层还是容易理顺逻辑,但是一旦出现层数过多,可读性就会变得非常差,就像一坨屎
  • 任务的不确定性。每一个任务会有成功和失败两种状态,就拿上面的代码,假如说有5层的嵌套,就要做5次的成功、失败的判断函数,明显的增加了代码的复杂度,不符合Unix哲学。

用Typescript实现MyPromise

问题出来了,那解决的思路也有了:

  • 消灭嵌套
  • 合并多个错误

设计一个对象实现上面两个功能,使用TypeScript的OOP相比于用原型链来实现会更加的容易理解。在实现Promise源码之前,对于Promise的用法、基本定义一定要有一个全方面的认知,不然去了解Promise也艰深晦涩。可以先去看看MDN对于Promise的本质定义

定义基本的属性和构造函数

Promise有三种状态:pending、 resolve、reject 对应了 等待、成功、失败,表示一个异步任务的状态是怎么样的。

enum States {
  PENDING = 'PENDING',
  RESOLVED = 'RESOLVED',
  REJECTED = 'REJECTED'
}

class MyPromise {
  private state: States = States.PENDING;
  private handlers: any[] = [];
  private value: any;
  constructor(executor: (resolve, reject) => void) {
    try {
      executor(this.resolve, this.reject);
    } catch (e) {
      this.reject(e);
    }
  }
}

handlers数组是表示当调用了then()方法时,向handlers添加回调函数。比如以下的情况,handlers中就会有两个回调函数,等待Promise的resolve/reject设置状态之后,调用handlers里的所有回调函数。

let promise1 = new MyPromise(test);
let promise2 = promise1
  .then(res => {  // <=== 匿名回调函数
    console.log(res);
    return 2;
  });
let promise3 = promise1
  .then(res => { // <=== 匿名回调函数
    setTimeout(() => {
      console.log(res + '***********************');
      return 4;
    }, 1000);
  })

value表示的一个异步函数返回值。

executor是带有 resolvereject 两个参数的函数 。Promise构造函数执行时立即调用executor 函数, resolvereject 两个函数作为参数传递给executor(executor 函数在Promise构造函数返回所建promise实例对象前被调用)

回到主题,我觉得先介绍then()方法是如何实现的比较合适

实现then()

then(onSuccess?, onFail?) {
    return new MyPromise((resolve, reject) => {
      return this.attachHandler({
        onSuccess: result => {
          if (!onSuccess) return resolve(result);
          try {
            return resolve(onSuccess(result));
          } catch (e) {
            return reject(e);
          }
        },
        onFail: reason => {
          if (!onFail) return reject(reason);
          try {
            return resolve(onFail(reason));
          } catch (e) {
            return reject(e);
          }
        }
      });
    });
  }

then方法的工作原理:返回一个新的Promise对象,且向原Promise对象中的handlers添加一个包含回调函数的对象,如果Promise处于Settled状态,那就直接执行回调函数,否则,得等待Promise的状态设置。

private execHandlers = () => {
    if (this.state === States.PENDING) return;
    this.handlers.forEach(handler => {
      if (this.state === States.REJECTED) {
        return handler.onFail(this.value);
      }
      return handler.onSuccess(this.value);
    });

    this.handlers = [];
  };

private attachHandler = (handler: any) => {
    this.handlers.push(handler);
    this.execHandlers();
  };

实现resolve和reject回调函数

按照原生的Promise.then()方法的逻辑来讲,原Promise的状态会直接影响到then方法返回的Promise的状态,因此设置状态的resolvereject函数逻辑如下:

private resolve = value => this.setResult(value, States.RESOLVED);

private reject = value => this.setResult(value, States.REJECTED);

private setResult = (value, state: States) => {
    const set = () => {
      if (this.state !== States.PENDING) return;
      this.value = value;
      this.state = state;
      return this.execHandlers();
    };
    setTimeout(set, 0);
};

因为无法实现真正的Promise的微任务,因此只能够通过setTimeout(fn,0),勉强来模拟实现

private resolve = value => this.setResult(value, States.RESOLVED);

private reject = value => this.setResult(value, States.REJECTED);

private setResult = (value, state: States) => {
    const set = () => {
      if (this.state !== States.PENDING) return;
      this.value = value;
      this.state = state;
      return this.execHandlers();
    };
    setTimeout(set, 0);
  };

离真正的微任务在一些特别的代码上还是有很大差距的,因为setTimeout是宏任务,在execHandlers方法中通过foreach 执行本次Promise的handlers中的回调函数时,处于同一个事件循环,以下的代码就会和真正的Promise有出入。

function test(res, rej) {
  console.log('executor');
  setTimeout(() => {
    console.log('Timer');
    res(1);
  }, 1000);
}
console.log('start');
let promise1 = new MyPromise(test); // <== 这里替换成原生的Promise,会发现promise2状态不同
let promise2 = promise1.then(res => {
  console.log(res);
  return 2;
});
let promise3 = promise1.then(res => {
  console.log(promise2); //原生的状态是resolve,MyPromise的状态是pending
});
console.log('end');

总结

就拿上面的demo来理解整个Promise帮助我们做了什么吧!

  • 控制台输出'start '
  • 创建MyPromise对象并且执行test函数,引用赋值于promise1=> 输出'executor',向延迟队列添加等待1s的回调函数
  • 调用promise1then方法 => 创建一个新的promise实例赋于给promise2,并且新的promise实例的executor执行promise1的attachHandler,将then函数中的回调函数对象push进promise1的handlers属性中,如果promise1已经是settled状态,直接更加promise1的状态来执行不同函数
  • promise3同promise2一样的道理,这时promise1的handlers数组中有两个持有回调函数的对象,这两个Promise3和promise2都等着promise1的setResult来执行相应的回调,因此promise3和promise此时属于pending状态
  • 控制台输出'end'
  • 等待1秒,控制台输出'Timer' ,调用Promise1的resolve函数,向微任务队列添加setResult状态函数,MyPromise使用settimeout模拟微任务队列
  • setResult状态函数根据res/rej状态执行handlers中的所有then添加的回调,

Promise类的catchfinally都是在then上建立的语法糖,具体大家可以更具MDN的定义来实现,还有Promise类的静态方法,可以参考我自己GitHub的实现。

不断的沉淀下来,总归会理解一个东西存在的意义。理解了promise的原理之后,去理解其他的底层实现有会一个很好的基础,了解了Promise底层之后,深深的感受到设计模式的强大。

如果小伙伴们觉得不错的话,点赞支持一下嗷 铁汁~

以下是用Typescript实现的MyPromise源代码,不过参数并没有用类型,所以称作es6的class语法也不为过。

enum States {
  PENDING = 'PENDING',
  RESOLVED = 'RESOLVED',
  REJECTED = 'REJECTED'
}
export class MyPromise {
  private state: States = States.PENDING;
  private handlers: any[] = [];
  private value: any;
  constructor(callback: (resolve, reject) => void) {
    try {
      callback(this.resolve, this.reject);
    } catch (e) {
      this.reject(e);
    }
  }

  private resolve = value => this.setResult(value, States.RESOLVED);
  private reject = value => this.setResult(value, States.REJECTED);

  private setResult = (value, state: States) => {
    const set = () => {
      if (this.state !== States.PENDING) return;
      this.value = value;
      this.state = state;
      return this.execHandlers();
    };
    setTimeout(set, 0);
  };

  private execHandlers = () => {
    if (this.state === States.PENDING) return;
    this.handlers.forEach(handler => {
      if (this.state === States.REJECTED) {
        return handler.onFail(this.value);
      }
      return handler.onSuccess(this.value);
    });

    this.handlers = [];
  };

  private attachHandler = (handler: any) => {
    this.handlers.push(handler);
    this.execHandlers();
  };

  then(onSuccess?, onFail?) {
    return new MyPromise((resolve, reject) => {
      return this.attachHandler({
        onSuccess: result => {
          if (!onSuccess) return resolve(result);
          try {
            return resolve(onSuccess(result));
          } catch (e) {
            return reject(e);
          }
        },
        onFail: reason => {
          if (!onFail) return reject(reason);
          try {
            return resolve(onFail(reason));
          } catch (e) {
            return reject(e);
          }
        }
      });
    });
  }
}

参考链接

https://www.freecodecamp.org/news/how-to-implement-promises-in-javascript-1ce2680a7f51/

https:/https://img.qb5200.com/download-x/developer.mozilla.org/zh-CNhttps://img.qb5200.com/download-x/docs/Web/JavaScript/Reference/Global_Objects/Promise

 

加载全部内容

相关教程
猜你喜欢
用户评论