手动实现Promise核心逻辑

Promise 类核心逻辑处理

1. Promise 是一个类，在执行之个类的时候，需要传递一个执行器进去，执行器会立即执行
2. Promsie 有三种状态:
   成功：fulfilled, pending --> fulfilled
   失败：rejected, pending --> rejected
   等待：pending
   一旦状态改变之后，就不可逆
3. resolve 和 reject 函数是用来改变状态的
   resolve：pending --> fulfilled，并且将值传给成功回调
   reject：pending --> rejected，且将值传给失败回调
4. then方法内部做的事情是，如果状态是成功调用成功回调； 如果状态是失败，就调用失败回调，then 方法是定义在原型对象中的方法
5. then 成功回调有个参数，成功之后的值；失败回调有参数，表示失败的原因

const PROMISEPENDIONG = "PROMISEPENDIONG";
const PROMISEFULFILLED = "PROMISEFULFILLED";
const PROMISEREJECTED = "PROMISEREJECTED";
class MyPromise {
    constructor(exetuator){
        exetuator(this.resolve, this.reject);
    }
    status = PROMISEPENDIONG;
    sucessValue = undefined;
    failReason = undefined;
    resolve = value => {
        if(this.status == PROMISEPENDIONG) {
            this.status = PROMISEFULFILLED;
            this.sucessValue = value;
        }
        
    }

    reject = reason => {
        if(this.status == PROMISEPENDIONG) {
            this.status = PROMISEREJECTED;
            this.failReason = reason;
        }
    }
    
    then(sucessCallBack, failCallBack) {
        if(this.status == PROMISEFULFILLED) {
            sucessCallBack(this.sucessValue);
        } else if(this.status == PROMISEREJECTED){
            failCallBack(this.failReason);
        }
    }

}

module.exports = MyPromise;
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

添加异步逻辑

6. 当添加异步逻辑时，then 方法会被立即调用，但是promise 状态是pending，我们还没处理此种状态。那我们可以将成功回调和失败回调先暂时保存，等状态改变时，再调用相应回调。

const PROMISEPENDIONG = "PROMISEPENDIONG";
const PROMISEFULFILLED = "PROMISEFULFILLED";
const PROMISEREJECTED = "PROMISEREJECTED";
class MyPromise {
    constructor(exetuator){
        exetuator(this.resolve, this.reject);
    }
    // 状态值
    status = PROMISEPENDIONG;
    // 成功结果
    sucessValue = undefined;
    // 失败原因
    failReason = undefined;
    // 成功回调
    sucessCallBack = undefined;
    // 失败回调
    failCallBack = undefined;
    resolve = value => {
        if(this.status == PROMISEPENDIONG) {
            this.status = PROMISEFULFILLED;
            this.sucessValue = value;

            // 若有缓存的成功回调则回调
            this.sucessCallBack &&  this.sucessCallBack(this.sucessValue);
            this.sucessCallBack = undefined;
            
        }
        
    }

    reject = reason => {
        if(this.status == PROMISEPENDIONG) {
            this.status = PROMISEREJECTED;
            this.failReason = reason;

            // 若有缓存的失败回调则回调
            this.failCallBack &&  this.failCallBack(this.sucessValue);
            this.failCallBack = undefined;
        }
    }
    
    then(sucessCallBack, failCallBack) {
        if(this.status == PROMISEFULFILLED) {
            sucessCallBack(this.sucessValue);
        } else if(this.status == PROMISEREJECTED){
            failCallBack(this.failReason);
        } else {
            this.sucessCallBack = sucessCallBack;
            this.failCallBack = failCallBack;
        }
    }

}

module.exports = MyPromise;
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

同个promise 实例注册多个回调函数

7. 当逻辑处理函数是同步时，不用另外处理直接可以调用；当逻辑处理函数是异步时，我们要把这些回调函数先保存到数组中，等到逻辑处理函数完成后，依次调用这些函数

const PROMISEPENDIONG = "PROMISEPENDIONG";
const PROMISEFULFILLED = "PROMISEFULFILLED";
const PROMISEREJECTED = "PROMISEREJECTED";
class MyPromise {
    constructor(exetuator){
        exetuator(this.resolve, this.reject);
    }
    // 状态值
    status = PROMISEPENDIONG;
    // 成功结果
    sucessValue = undefined;
    // 失败原因
    failReason = undefined;
    // 成功回调
    sucessCallBack = [];
    // 失败回调
    failCallBack = [];
    resolve = value => {
        if(this.status == PROMISEPENDIONG) {
            this.status = PROMISEFULFILLED;
            this.sucessValue = value;

            // 若有缓存的成功回调则回调
            while(this.sucessCallBack.length) this.sucessCallBack.shift()(this.sucessValue);
 
        }
        
    }

    reject = reason => {
        if(this.status == PROMISEPENDIONG) {
            this.status = PROMISEREJECTED;
            this.failReason = reason;

            // 若有缓存的失败回调则回调
            while(this.failCallBack.length) this.failCallBack.shift()(this.reason);

        }
    }
    
    then(sucessCallBack, failCallBack) {
        if(this.status ==
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