ES5和SE6来实现一个Promise效果

这个是ES5的写法

function myPromise(executor) {
    // 定义promise的状态
    let self = this;
    self.status = "pendding";
    self.value = null; // 成功之后 返回数据
    self.reason = null;  // 失败之后返回原因

    // 这个是 发布订阅
    self.fulfilledCallbackList = [];
    self.rejectCallbackList = [];

    // 定义完成时的方法
    function resolve(value) {
        if (self.status == "pendding") {
            self.status = "fulfilled";
            self.value = value;
            self.fulfilledCallbackList.forEach(item => item(value));
        }
    }
    // 这个是 异常时候的方法
    function reject(err) {
        if (self.status == "pendding") {
            self.status = "rejected";
            self.reason = err;
            self.rejectCallbackList.forEach(item => item(err));
        }
    }

    // 这个是 立即执行 executor里面的方法
    try {
        executor && executor(resolve, reject);
    } catch (err) {
        reject(err.message);
    }
}

// 这个是 原型链上面的 then 方法
myPromise.prototype.then = function (onFulfilled, onRejected) {
    // 这里 还要 判断一下 传入进来 是不是一个方法
    onFulfilled = typeof onFulfilled == 'function' ? onFulfilled : function (data) { resolve(data) };
    onRejected = typeof onRejected == 'function' ? onRejected : function (err) { throw err; }

    let self = this;

    // 这里是 then 里面的回调部分
    if (self.status == "fulfilled") {
        // 链式调用 就是 直接返回一个 Promise
        return new myPromise((resolve, reject) => {
            try {
                let x = onFulfilled(self.value);
                x instanceof myPromise ? x.then(resolve, reject) : resolve(x);
            } catch (err) {
                reject(err);
            }

        });
    }

    // 这个是 失败的状态
    if (self.status == "rejected") {
        return new myPromise((resolve, reject) => {
            try {
                let x = onRejected(self.reason);
                x instanceof myPromise ? x.then(resolve, reject) : resolve(x);
            } catch (err) {
                reject(err);
            }
        });
    }

    // 这个是 pendding的状态
    if (self.status == "pendding") {
        return new myPromise((resolve, reject) => {
            self.fulfilledCallbackList.push(() => {
                let x = onFulfilled(self.value);
                x instanceof myPromise ? x.then(resolve, reject) : resolve(x);
            });
            self.rejectCallbackList.push(() => {
                let x = onRejected(self.reason);
                x instanceof myPromise ? x.then(resolve, reject) : resolve(x);
            });
        });
    }
}


myPromise.prototype.catch = function(fn) {
    this.then(null, fn);
}
const aaa = new myPromise((resolve, reject) => {
    console.log(111);
    setTimeout(() => {
        resolve("2222222222222");
    }, 2000);
}).then((res, rej) => {
    return new myPromise((re1, rj1)=>{
        re1(res + "sdfsdfsdfsdf");
    });
}).then((res1, rej1)=>{
    console.log(res1);
});

console.log("aaa", aaa);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

这个是ES6 Class版本的实现

class MyPromise {
    constructor(executor) {
        // 这个是 promise的状态机制
        this.status = "pendding";
        // 这个是 成功的值
        this.value = null;
        // 这个是 失败的值
        this.reason = null;

        // 这里是 发布订阅的部分
        this.fulfilledCallbacks = [];
        this.rejectedCallbacks = [];
        // 这个是 立即执行 executor里面的方法
        
        try {
            // 这里要绑定 this , 然后下面的 函数 才能 拿到这里的this
            executor && executor(this.resolve.bind(this), this.reject.bind(this));
        } catch (err) {
            this.reject(err.message);
        }
    }

    resolve(data) {
        if (this.status == "pendding") {
            this.status = "fulfilled";
            this.value = data;
            // 这个是 发布 订阅里面的函数
            this.fulfilledCallbacks.forEach(item => item(data));
        }
    }

    // 这个是 reject 拒绝的方法
    reject(err) {
        if (this.status == "pendding") {
            this.status = "rejected";
            this.reason = err;
            this.rejectedCallbacks.forEach(item => item(err));
        }
    }

    // 这个是 then 方法
    then(onFulfilled, onRejected) {
        let self = this;
        // 这个是 判断 传进来的是否是 方法
        onFulfilled = typeof onFulfilled == 'function' ? onFulfilled : function (data) { self.resolve(data) };
        onRejected = typeof onRejected == 'function' ? onRejected : function (err) { throw err };
        
        // 这里是成功的值
        if (self.status == "fulfilled") {
            // 这里是 链式调用的部分 通过返回 MyPromise 来实现
            return new MyPromise((resolve, reject) => {
                try {
                    let x = self.onFulfilled(self.value);
                    x instanceof MyPromise ? x.then(resolve, reject) : self.resolve(x);
                } catch (error) {
                    reject(error);
                }
            });
        }

        // 这里是 失败的时候
        if (self.status == "rejected") {
            return new MyPromise((resolve, reject) => {
                try {
                    let x = onRejected(self.reason);
                    x instanceof MyPromise ? x.then(resolve, reject) : self.resolve(x);
                } catch (error) {
                    reject(error);
                }
            });
        }

        // 这里是 pendding 加载的时候
        if (self.status == "pendding") {
            return new MyPromise((resolve, reject) => {
                self.fulfilledCallbacks.push(() => {
                    let x = onFulfilled(self.value);
                    x instanceof MyPromise ? x.then(resolve, reject) : self.resolve(x);
                });
                self.rejectedCallbacks.push(() => {
                    let x = onRejected(self.reason);
                    x instanceof MyPromise ? x.then(resolve, reject) : self.resolve(x);
                });
            });

        }
    }

    catch(fn) {
        this.then(null, fn);
    }
}


const aaa = new MyPromise((resolve, reject) => {
    console.log(111);
    setTimeout(() => {
        resolve("我是输出.");
    }, 2000);
}).then((res, rej) => {
    return new MyPromise((re1, rj1)=>{
        console.log("res", res);
        setTimeout(() => {
            re1(res + "对,我是后面的输出");
        }, 2000);
    });
}).then((res1, rej1)=>{
    console.log(res1);
});

console.log("aaa", aaa);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112