Promise 구현을 위한 세부 단계

Promise를 구현하는 세부 단계에 대한 내용입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 생성자

우선 Promise에는 세 가지 상태가 있다는 것을 모두 알고 있습니다. 편의상 상수로 정의하겠습니다

const PENDING = 'pending';
const FULFILLED = 'fulfilled';
const REJECTED = 'rejected';

다음으로 클래스를 정의하겠습니다

class MyPromise {
    constructor(executor) {
        //控制状态，使用了一次之后，接下来的都不被使用
        this.state = PENDING;
        this.value = null;
        this.reason = null;
        
        // 定义resolve函数
        const resolve = value => {
            if (this.state === PENDING) {
                this.value = value;
                this.state = FULFILLED;
            }
        }
        
        // 定义reject函数
        const reject = value => {
            if (this.state === PENDING) {
                this.reason = value;
                this.state = REJECTED;
            }
        }
        
        // executor方法可能会抛出异常，需要捕获
        try {
             // 将resolve和reject函数给使用者  
            executor(resolve, reject);
        } catch (error) {
            // 如果在函数中抛出异常则将它注入reject中
            reject(error);
        }
    }
}

이것은 기본적으로 이해하기 쉽습니다. 간략하게 설명하세요

executor: 이는 Promise 객체를 인스턴스화할 때 생성자에 전달되는 매개변수입니다. 일반적으로 함수(resolve,reject)입니다.{}

state: `Promise의 상태. 이는 기본 보류 상태입니다. 처음에는 메서드를 거부할 때마다 해당 값이 변경되며 후속 then` 메서드에서 사용됩니다.

값: 해결 콜백이 성공한 후 해결 메서드의 매개변수 값이 호출됩니다.

이유: 거부 콜백이 성공한 후 거부 메소드의 매개변수 값이 호출됩니다. 매개변수 값

resolve: 생성자에서 해결 메소드를 선언하고 수신 실행기 메소드를 통해 이를 전달하여 사용자에게 콜백합니다.

reject: 생성자에서 거부 메소드를 선언하고 들어오는 실행기 메소드를 통해 전달합니다. 그 중

2를 호출한 다음

Promise에서 해결 또는 거부 결과를 얻는 데 사용됩니다. 여기서 then 메소드에는 성공 콜백과 실패 콜백이라는 두 개의 매개변수가 필요하다는 것을 알 수 있습니다.

then(onFulfilled, onRejected) {
    if (this.state === FULFILLED) {
        onFulfilled(this.value)
    }
    if (this.state === REJECTED) {
        onRejected(this.reason)
    }
}

간단히 테스트 코드를 실행해 볼까요

const mp = new MyPromise((resolve, reject)=> {
    resolve('******* i love you *******');
})
mp.then((suc)=> {
console.log(11111, suc);
}, (err)=> {
console.log('****** 你不爱我了*******', err)
})

// 11111 '******* i love you *******'

문제 없는 것 같으니 비동기 기능을 한번 볼까요?

const mp = new MyPromise((resolve, reject)=> {
    setTimeout(()=> {
        resolve('******* i love you *******');
    }, 0)
})
mp.then((suc)=> {
console.log(11111, suc);
}, (err)=> {
console.log('****** 你不爱我了*******', err)
})

아무것도 인쇄되지 않은 것을 발견하게 됩니다. 무엇이 문제인가요? 비동기적인 이유로 인해 then을 실행하면 상태 값이 변경되지 않으므로 그때의 판단이 무효화됩니다. 그럼 어떻게 해결하나요?

이제 클래식 콜백에 대해 이야기해 보겠습니다. 소스 코드에

// 存放成功回调的函数
this.onFulfilledCallbacks = [];
// 存放失败回调的函数
this.onRejectedCallbacks = [];

const resolve = value => {
    if (this.state === PENDING) {
        this.value = value;
        this.state = FULFILLED;
        this.onFulfilledCallbacks.map(fn => fn());
    }
}

const reject = value => {
    if (this.state === PENDING) {
        this.value = value;
        this.reason = REJECTED;
        this.onRejectedCallbacks.map(fn => fn());
    }
}

Add

then(onFulfilled, onRejected) {
    // ... 
    if(this.state === PENDING) {
        this.onFulfilledCallbacks.push(()=> {
            onFulfilled(this.value);
        });
        this.onRejectedCallbacks.push(()=> {
            onRejected(this.value);
        })
    }
}

를 추가하세요. 자, 이제 비동기 문제는 해결되었으니 바로 테스트 코드를 실행해 보겠습니다. 결과가 나왔습니다. 여기서 아직 무엇이 부족합니까?

연쇄 호출

매개변수를 전달하지 않으면 어떻게 해야 하나요?

이 두 가지의 아이디어도 매우 간단합니다. 연쇄 호출은 단지 Promise 인스턴스를 반환한다는 의미입니다. 매개변수를 전달하지 않으면 기본값이 적용됩니다. 소스코드를 살펴보겠습니다

then(onFulfilled, onRejected) {
    let self = this;
    let promise2 = null;
    //解决onFulfilled,onRejected没有传值的问题
    onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : y => y
    //因为错误的值要让后面访问到，所以这里也要跑出个错误，不然会在之后then的resolve中捕获
    onRejected = typeof onRejected === 'function' ? onRejected : err => {
        throw err;
    }

    promise2 = new MyPromise((resolve, reject) => {
        if (self.state === PENDING) {
            console.log('then PENDING')
            self.onFulfilledCallbacks.push(() => {
                setTimeout(() => {
                    try {
                        let x = onFulfilled(self.value);
                    console.log(333333, x, typeof x);
                        self.resolvePromise(promise2, x, resolve, reject);
                    } catch (reason) {
                        reject(reason);
                    }
                }, 0)

            });
            self.onRejectedCallbacks.push(() => {
                setTimeout(() => {
                    try {
                        let x = onRejected(self.reason);
                        self.resolvePromise(promise2, x, resolve, reject);
                    } catch (reason) {
                        reject(reason);
                    }
                }, 0);
            });
        }

        if (self.state === FULFILLED) {
            console.log('then FULFILLED')
            setTimeout(() => {
                try {
                    let x = onFulfilled(self.value);
                    self.resolvePromise(promise2, x, resolve, reject);
                } catch (reason) {
                    reject(reason);
                }
            }, 0);
        }

        if (self.state === REJECTED) {
            console.log('then REJECTED')
            setTimeout(() => {
                try {
                    let x = onRejected(self.reason);
                    self.resolvePromise(promise2, x, resolve, reject);
                } catch (reason) {
                    reject(reason);
                }
            })
        }
    });

    return promise2;
}

왜 setTimeout 레이어를 외부에 래핑해야 하나요? : Promise 자체는 비동기식 메서드이고 마이크로태스크 시리즈에 속하기 때문에 실행 스택이 완료된 후에 그 값을 얻어야 하므로 모든 반환 값에는 비동기식 setTimeout 계층이 포함되어야 합니다.

resolvePromise란 무엇인가요? : 이는 실제로 공식 Promise/A+의 요구 사항입니다. then은 물론 Promise 객체를 포함한 모든 함수를 반환할 수 있고 그것이 Promise 객체인 경우 Promise 객체가 아닐 때까지 분해하여 값을 가져와야 합니다.

3.resolvePromise

코드를 직접 살펴볼까요

resolvePromise(promise2, x, resolve, reject) {
    let self = this;
    let called = false; // called 防止多次调用
    //因为promise2是上一个promise.then后的返回结果，所以如果相同，会导致下面的.then会是同一个promise2，一直都是，没有尽头
    //相当于promise.then之后return了自己，因为then会等待return后的promise，导致自己等待自己，一直处于等待
    if (promise2 === x) {
        return reject(new TypeError('循环引用'));
    }
    //如果x不是null，是对象或者方法
    if (x !== null && (Object.prototype.toString.call(x) === '[object Object]' || Object.prototype.toString.call(x) === '[object Function]')) {
        // x是对象或者函数
        try {
            let then = x.then;

            if (typeof then === 'function') {
                then.call(x, (y) => {
                    // 别人的Promise的then方法可能设置了getter等，使用called防止多次调用then方法
                    if (called) return;
                    called = true;
                    // 成功值y有可能还是promise或者是具有then方法等，再次resolvePromise，直到成功值为基本类型或者非thenable
                    self.resolvePromise(promise2, y, resolve, reject);
                }, (reason) => {
                    if (called) return;
                    called = true;
                    reject(reason);
                });
            } else {
                if (called) return;
                called = true;
                resolve(x);
            }
        } catch (reason) {
            if (called) return;
            called = true;
            reject(reason);
        }
    } else {
        // x是普通值，直接resolve
        resolve(x);
    }
}

왜 promise2와 x를 처음에 판단해야 할까요? : 먼저 Promise/A+에는 두 개가 동일하면 예외가 발생해야 한다고 기록되어 있습니다. 두 개가 동일하면 다음 예를 먼저 살펴보겠습니다. then의 결과는 Promise 객체입니다. 이 Promise 객체가 생성될 때solvePromise(promise2,x,resolve,reject) 함수가 호출되었습니다. 그리고 x는 자신과 동일하고 Promise이기 때문에 then 메서드가 이를 반복해야 합니다. Promise 객체가 아닐 때까지 x(p2)의 결과는 여전히 대기 중이지만 그는 자신의 then 메서드를 실행하려고 하므로 대기가 발생합니다.

resolvePromise 함수를 재귀적으로 호출해야 하는 이유는 무엇입니까? : 나는 여기에서 재귀 호출 방법을 사용한다는 것을 신중한 사람들이 발견했다고 믿습니다. 우선 이것은 Promise/A+에서 필요합니다. 다른 Promise의 해결 Promise가 포함된 경우 x가 Promise 객체가 아닐 때까지 값을 반복적으로 검색해야 합니다.

4.catch

//catch方法
catch(onRejected){
  return this.then(null,onRejected)
}

5. finally

finally 메소드는 Promise 객체의 최종 상태에 관계없이 수행될 작업을 지정하는 데 사용됩니다. 이 방법은 ES2018에 도입된 표준입니다.

finally(fn) {
    return this.then(value => {
        fn();
        return value;
    }, reason => {
        fn();
        throw reason;
    });
};

6.resolve/reject

Promise.resolve()와 Promise.reject()의 두 가지 사용법을 보셨을 것입니다. 그 기능은 실제로 Promise 객체를 반환하는 것입니다.

static resolve(val) {
    return new MyPromise((resolve, reject) => {
        resolve(val)
    })
}
//reject方法
static reject(val) {
    return new MyPromise((resolve, reject) => {
        reject(val)
    })
}

7, all

all 메소드는 Promise에서 매우 일반적으로 사용되는 메소드라고 할 수 있습니다. 그 기능은 모두 해결되면 Promise 객체의 배열을 배치하는 것입니다. 있는 경우 Reject가 발생하면 Catch가 실행되고 그 결과도 배열에 순서대로 정렬되므로 구현해 보겠습니다.

static all(promiseArr) {
    return new MyPromise((resolve, reject) => {
        let result = [];

        promiseArr.forEach((promise, index) => {
            promise.then((value) => {
                result[index] = value;

                if (result.length === promiseArr.length) {
                    resolve(result);
                }
            }, reject);
        });
    });
}

8、race

race方法虽然不常用，但是在Promise方法中也是一个能用得上的方法，它的作用是将一个Promise数组放入race中，哪个先执行完，race就直接执行完，并从then中取值。我们来实现一下吧。

static race(promiseArr) {
    return new MyPromise((resolve, reject) => {
        promiseArr.forEach(promise => {
            promise.then((value) => {
                resolve(value);
            }, reject);
        });
    });
}

9、deferred

static deferred() {
    let dfd = {};
    dfd.promies = new MyPromise((resolve, reject) => {
        dfd.resolve = resolve;
        dfd.rfeject = reject;
    });
    return dfd;
};

什么作用呢？看下面代码你就知道了

let fs = require('fs')
let MyPromise = require('./MyPromise')
//Promise上的语法糖，为了防止嵌套，方便调用
//坏处 错误处理不方便
function read(){
  let defer = MyPromise.defer()
  fs.readFile('./1.txt','utf8',(err,data)=>{
    if(err)defer.reject(err)
    defer.resolve(data)
  })
  return defer.Promise
}

10、测试

const mp1 = MyPromise.resolve(1);
const mp2 = MyPromise.resolve(2);
const mp3 = MyPromise.resolve(3);
const mp4 = MyPromise.reject(4);

MyPromise.all([mp1, mp2, mp3]).then(x => {
    console.log(x);
}, (err) => {
    console.log('err1', err);
})
MyPromise.race([mp1, mp4, mp2, mp3]).then(x => {
    console.log(x);
}, (err) => {
    console.log('err2', err);
})

var mp = new MyPromise((resolve, reject) => {
    console.log(11111);
    setTimeout(() => {
        resolve(22222);
        console.log(3333);
    }, 1000);
});
mp.then(x => {
    console.log(x);
}, (err) => {
    console.log('err2', err);
})
//11111
//[ 1, 2, 3 ]
//1
//3333
//22222

完整源码请查看

本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的的JavaScript教程视频栏目！！！

위 내용은 Promise 구현을 위한 세부 단계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!