美文网首页
[源码]手写Promise

[源码]手写Promise

作者: _royalpioneer | 来源:发表于2021-02-17 12:29 被阅读0次

    Promise A+规范: https://promisesaplus.com/

    promise功能罗列

    阅读Promise A+规范后,罗列下大致需要实现的功能

    
     1. excutor在构造函数执行时执行
     2. -----------Promise State--------------------------
     3. Promise只能是pending\fulfilled\rejected三种状态之一
     4. 处于pending的Promise接下来只会变成fulfilled或者rejected
     5. 处于fulfilled的Promise状态再也不能改变了,且拥有一个引用不能改变的值value
     6. 处于rejected的Promise状态也再不能改变,且拥有一个引用不能改变的失败原因reason
     7. ---------------------------------------------------
     8. -----------then()方法-------------------------------
     9. Promise要提供then方法来接受当前或者最终的value和reason
     10.then方法接受两个参数 new Promise().then(onFulfilled, onRejected)
     11.onFulfilled和onRejected这两个参数是非必选的,如果他们不是Function类型,则会被忽略(catch可以利用这一条来实现)
     10. 参数onFulFilled函数用value作为第一个参数,当且仅当Promise的状态变为fulfilled后执行,最多执行一次
     11. 参数onRejected函数用reason作为第一个参数,当且仅当Promise的状态变为rejected后执行,最多执行一次
     12. onFulfilled or onRejected must not be called until the execution context stack contains only platform code. [3.1].
     13. then可以被多次调用then may be called multiple times on the same promise.
    If/when promise is fulfilled, all respective onFulfilled callbacks must execute in the order of their originating calls to then.
    If/when promise is rejected, all respective onRejected callbacks must execute in the order of their originating calls to then.
    14.then must return a promise [3.3].
    
     “promise2 = promise1.then(onFulfilled, onRejected);“
     
    If either onFulfilled or onRejected returns a value x, run the Promise Resolution Procedure [[Resolve]](promise2, x).
    If either onFulfilled or onRejected throws an exception e, promise2 must be rejected with e as the reason.
    If onFulfilled is not a function and promise1 is fulfilled, promise2 must be fulfilled with the same value as promise1.
    If onRejected is not a function and promise1 is rejected, promise2 must be rejected with the same reason as promise1.
    

    除此之外,还有一部分The Promise Resolution Procedure

    除彼之外,还有then的链式调用,简单精炼的概括下Promise的then链式调用的特点:
    catch就是then、
    成功:返回legal js value,返回成功态的Promise
    失败:抛异常,返回失败态的Promise

    代码实现

    先实现下上面已经罗列出来的功能,后续功能在之后陆续补充完善

    自定义_Promise类 (有几点注意,用箭头函数规避this指向问题;resovle和reject属于对象范畴,故不把他们放在Prototype上)

    // _Promise.js
    
    const PENDING = "pending", FULFILLED = "fulfilled", REJECTED = "rejected";
    
    class _Promise {
      constructor(excutor) {
        this.status = PENDING;
        this.value = undefined;
        this.reason = undefined;
    
        const resovle = value => {
            if(this.status === PENDING) {
                this.status = FULFILLED;
                this.value = value;
            }
        }
    
        const reject = reason => {
            if(this.status === PENDING) {
                this.status = REJECTED;
                this.reason = reason;
            }
        }
    
        try{
            excutor(resovle, reject);
        }catch(e){
            reject(e);
        }
        
      }
    
      then(onFulFilled, onRejected) {
          if(this.status === FULFILLED){
              onFulFilled(this.value);
          }
    
          if(this.status === REJECTED){
              onRejected(this.reason);
          }
      }
    }
    
    module.exports = _Promise;
    

    测试程序

    const _Promise = require("./MyPromise");
    
    let promise  = new _Promise((resovle, reject) => {
        // resovle("success");
        // reject("failed");
        throw new Error("ERRORRRR");
    });
    
    promise.then(value => console.log(value), reason => console.log(reason));
    

    后续将补充then的链式调用,发布订阅模式.

    相关文章

      网友评论

          本文标题:[源码]手写Promise

          本文链接:https://www.haomeiwen.com/subject/ikjvxltx.html