实现一个类Pormise

2

核心代码

为了精简代码,下面的Promise实现中去掉了代码校验,这样方便小伙伴看到Promise的核心逻辑。ES6语法。

活不多说,直接放代码

class PromiseTest {
    executor = (resolve, reject) => {
    }

    constructor(executor) {
        this.executor = executor;
    }

    then(sucess, error) {
        let flag = true;
        let resolveV;
        let rejectV;
        const resolve = (value) => {
            flag = true;
            resolveV =  sucess(value);
        };
        const reject = (value) => {
            flag = false;
            rejectV = error(value);
        };
        this.executor(resolve, reject);
        // onfulfilled onrejected返回参数的传递  这是promise的精髓😀
        return new PromiseTest((resolveSub, rejectSub) => {
            if (flag) {
                resolveSub(resolveV);
            } else {
                rejectSub(rejectV);
            }
        });
    }
}

有没有很简单,下面对照最典型的实用方法非小伙伴讲解一些这个简单的代码。

代码测试和代码讲解

const promise = new PromiseTest(function(resolve, reject) {
 if (true){
    resolve("sucess");
  } else {
    reject("erorr");
  }
});

promise.then(function (value) {
    console.log(value)    // => sucess
    return "sub " + value;
}, function (error) {
    console.log(error)    // => erorr
    return "sub " + error;
}).then(function (value) {
    console.log(value)  // => sub sucess
}, function (error) {
    console.log(error)  // => sub erorr 
});  
// 回调函数的返回值是可以传递的下一个then回调函数里面,这样可以像元promise一样无限传递下去😀

简单的归纳一下,Promise构建的时候把你传入的executor(resolve, reject){}函数缓存到返回的promise对象中,当你调用promise的then方法的时候,就是执行你写的executor(resolve, reject){}函数,并then方法中定义的两个回调函数替换替换到构建Promise时定义的executor(resolve, reject){}中的两个入参。

当然promise不会像我说的这么简单,但是核心原理就是这个样的。

你可能感兴趣的

长颈鹿 · 3月20日

有几个地方需要注意:

  1. function (resolve, reject) 在promise 创建完毕后就会执行,不是到then 里面。
  2. then 回调函数返回如果是 promise,需要替代内部返回新的promise。
  3. 如果失败了,后续没有一直触发失败回调

+1 回复

0

你说的对,t {__zone_symbol__state: null, __zone_symbol__value: Array(4)},是个队列,多谢指正

jsure 作者 · 3月25日
长颈鹿 · 3月20日

我看了一遍这个 https://github.com/stefanpenn...。大兄弟,你这个太标题党了。

回复

载入中...