JavaScript로 나만의 Promise 만들기

왜요?

JavaScript Promise가 어떻게 내부적으로 콜백을 비동기적으로 실행하는지 알아보기 위해.

자바스크립트로 나만의 Promise를 만들어 봅시다! Promise/A 사양을 따르면 Promise가 비동기 작업을 처리하고, 해결하고, 거부하고, 예측 가능한 연결 및 오류 처리를 보장하는 방법을 설명합니다.

일을 단순하게 유지하기 위해 Promises/A 사양에서 ✅로 표시된 주요 규칙에 중점을 두겠습니다. 이는 전체 구현이 아니라 단순화된 버전입니다. 우리가 구축할 항목은 다음과 같습니다.

1. 용어

1.1 'promise'는 이 사양을 준수하는 동작을 갖는 then 메소드가 있는 객체 또는 함수입니다.

1.2 thenable'은 then 메소드를 정의하는 객체 또는 함수입니다.

1.3 '값'은 유효한 JavaScript 값(정의되지 않음, Thenable 또는 Promise 포함)입니다.

1.4 '예외'는 throw 문을 사용하여 발생하는 값입니다.

1.5 '이유'는 Promise가 거부된 이유를 나타내는 값입니다.

2. 요구사항

2.1 약속 상태

약속은 보류, 이행 또는 거부의 세 가지 상태 중 하나여야 합니다.

2.1.1. 보류 중인 경우 약속: ✅

⟶ 이행 또는 거부 상태로 전환될 수 있습니다.

2.1.2. 이행되면 약속: ✅

⟶ 다른 상태로 전환하면 안 됩니다.

⟶ 값이 있어야 하며 변경되어서는 안 됩니다.

2.1.3. 거부되면 약속: ✅

⟶ 다른 상태로 전환하면 안 됩니다.

⟶ 변할 수 없는 이유가 있어야 합니다.

2.2 then 메소드

Promise는 현재 또는 최종 값이나 이유에 액세스하기 위한 then 메소드를 제공해야 합니다.

Promise의 then 메소드는 두 가지 인수를 받습니다:

promise.then(onFulfilled, onRejected);

2.2.1. onFulfilled 및 onRejected는 모두 선택적 인수입니다: ✅

⟶ onFulfilled가 함수가 아니면 무시해야 합니다.

⟶ onRejected가 함수가 아닌 경우 무시해야 합니다.

2.2.2. onFulfilled가 함수인 경우: ✅

⟶ Promise 값을 첫 번째 인수로 사용하여 Promise가 이행된 후에 호출해야 합니다.

⟶ 약속이 이행되기 전에는 호출하면 안 됩니다.

⟶ 두 번 이상 호출하면 안 됩니다.

2.2.3. onRejected가 함수인 경우 ✅

⟶ Promise가 거부된 후에 호출해야 하며 Promise의 이유를 첫 번째 인수로 사용하여 호출해야 합니다.

⟶ 약속이 거부되기 전에 호출하면 안 됩니다.

⟶ 두 번 이상 호출하면 안 됩니다.

2.2.4. 실행 컨텍스트 스택에 플랫폼 코드만 포함될 때까지 onFulfilled 또는 onRejected를 호출하면 안 됩니다. ✅

2.2.5. onFulfilled 및 onRejected는 함수로 호출되어야 합니다(즉, 이 값이 없음). ✅

2.2.6. 그런 다음 동일한 Promise에 대해 여러 번 호출될 수 있습니다. ✅

⟶ 약속이 이행되면 모든 해당 onFulfilled 콜백은 원래 호출 순서대로 실행되어야 합니다.

⟶ 약속이 거부되는 경우 모든 해당 onRejected 콜백은 원래 호출 순서대로 실행되어야 합니다.

2.2.7. 그런 다음 약속을 반환해야 합니다. ✅

promise.then(onFulfilled, onRejected);

⟶ onFulfilled 또는 onRejected가 x 값을 반환하는 경우 약속 해결 절차 [[Resolve]](promise2, x)를 실행하세요. ❌

⟶ onFulfilled 또는 onRejected에서 예외 e가 발생하면 promise2는 e를 이유로 거부되어야 합니다. ❌

⟶ onFulfilled가 함수가 아니고 promise1이 이행된 경우 promise2는 promise1과 동일한 값으로 이행되어야 합니다. ❌

⟶ onRejected가 함수가 아니고 promise1이 거부된 경우 promise2도 promise1과 같은 이유로 거부되어야 합니다. ❌

구현

JavaScript Promise는 Promise가 생성될 때 즉시 호출되는 실행기 함수를 인수로 사용합니다.

promise2 = promise1.then(onFulfilled, onRejected);

new Promise(excecutor);

핵심 Promise/A 사양은 Promise를 생성, 이행 또는 거부하는 방법을 다루지 않습니다. 그것은 당신에게 달려 있습니다. 그러나 Promise 구성을 위해 제공하는 구현은 JavaScript의 비동기 API와 호환되어야 합니다. Promise 클래스의 첫 번째 초안은 다음과 같습니다.

const promise = new Promise((resolve, reject) => {
    // Runs some async or sync tasks
});

규칙 2.1(약속 상태)에는 약속이 보류, 이행 또는 거부의 세 가지 상태 중 하나에 있어야 한다고 명시되어 있습니다. 또한 각 상태에서 어떤 일이 일어나는지 설명합니다.

Promise가 이행되거나 거부되면 Promise는 다른 상태로 전환되어서는 안 됩니다. 따라서 전환을 하기 전에 Promise가 보류 상태인지 확인해야 합니다.

class YourPromise {
    constructor(executor) {
        this.state = 'pending';
        this.value = undefined;
        this.reason = undefined;

        const resolve = value => {
            if (this.state === 'pending') {
                this.state = 'fulfilled';
                this.value = value;
            }
        };

        const reject = reason => {
            if (this.state === 'pending') {
                this.state = 'rejected';
                this.reason = reason;
            }
        };

        try {
            executor(resolve, reject);  // The executor function being called immediately
        } catch (error) {
            reject(error);
        }
    }
}

프로미스의 초기 상태가 보류 중이라는 것을 이미 알고 있으며 명시적으로 이행되거나 거부될 때까지 그대로 유지되도록 합니다.

const resolve = value => {
    if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
    }
};

const reject = reason => {
    if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
    }
};

실행기 함수는 promise가 인스턴스화되는 즉시 호출되므로 생성자 메서드 내에서 호출합니다.

this.state = 'pending';

YourPromise 클래스의 첫 번째 초안이 여기에서 완성되었습니다.

Promise/A 사양은 주로 상호 운용 가능한 then() 메서드를 정의하는 데 중점을 둡니다. 이 메서드를 사용하면 Promise의 현재 또는 최종 값이나 이유에 액세스할 수 있습니다. 자세히 살펴보겠습니다.

규칙 2.2(then 메서드)에서는 Promise에 두 개의 인수를 허용하는 then() 메서드가 있어야 한다고 명시합니다.

try {
    executor(resolve, reject);
} catch (error) {
    reject(error);
}

onFulfilled 및 onRejected는 모두 약속이 이행되거나 거부된 후에 호출되어야 하며, 함수인 경우 약속의 값이나 이유를 첫 번째 인수로 전달해야 합니다.

class YourPromise {
    constructor(executor) {
        // Implementation
    }

    then(onFulfilled, onRejected) {
        // Implementation
    }
}

또한 약속이 이행되거나 거부되기 전에 호출해서는 안 되며, 한 번 이상 호출하면 안 됩니다. onFulfilled 및 onRejected는 모두 선택 사항이므로 함수가 아닌 경우 무시해야 합니다.

규칙 2.2, 2.2.6, 2.2.7을 보면 Promise에는 then() 메서드가 있어야 하고 then() 메서드는 여러 번 호출될 수 있으며 다음을 반환해야 한다는 것을 알 수 있습니다. 약속:

promise.then(onFulfilled, onRejected);

간단하게 하기 위해 별도의 클래스나 함수를 다루지 않습니다. 실행기 함수를 전달하여 Promise 개체를 반환합니다.

promise2 = promise1.then(onFulfilled, onRejected);

Executor 함수 내에서 약속이 이행되면 onFulfilled 콜백을 호출하고 약속 값으로 해결합니다. 마찬가지로 약속이 거부되면 onRejected 콜백을 호출하고 약속 이유와 함께 거부합니다.

다음 질문은 Promise가 아직 보류 상태인 경우 onFulfilled 및 onRejected 콜백을 어떻게 처리해야 하는가입니다. 다음과 같이 나중에 호출되도록 대기열에 추가합니다.

new Promise(excecutor);

끝났습니다. 다음은 then() 메서드를 포함하는 Promise 클래스의 두 번째 초안입니다.

const promise = new Promise((resolve, reject) => {
    // Runs some async or sync tasks
});

여기에서는 콜백을 보관하기 위한 대기열로 onFulfilledCallbacks 및 onRejectedCallbacks라는 두 필드를 소개합니다. 이러한 대기열은 Promise가 보류 중인 동안 then() 호출을 통해 콜백으로 채워지고 Promise가 이행되거나 거부될 때 호출됩니다.

Promise 클래스를 테스트해 보세요.

class YourPromise {
    constructor(executor) {
        this.state = 'pending';
        this.value = undefined;
        this.reason = undefined;

        const resolve = value => {
            if (this.state === 'pending') {
                this.state = 'fulfilled';
                this.value = value;
            }
        };

        const reject = reason => {
            if (this.state === 'pending') {
                this.state = 'rejected';
                this.reason = reason;
            }
        };

        try {
            executor(resolve, reject);  // The executor function being called immediately
        } catch (error) {
            reject(error);
        }
    }
}

다음과 같이 출력되어야 합니다.

const resolve = value => {
    if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
    }
};

const reject = reason => {
    if (this.state === 'pending') {
        this.state = 'rejected';
        this.reason = reason;
    }
};

한편, 다음 테스트를 실행하면:

this.state = 'pending';

다음을 얻을 수 있습니다:

try {
    executor(resolve, reject);
} catch (error) {
    reject(error);
}

대신:

class YourPromise {
    constructor(executor) {
        // Implementation
    }

    then(onFulfilled, onRejected) {
        // Implementation
    }
}

왜요? 문제는 then()이 호출될 때 YourPromise 인스턴스가 이미 해결되거나 거부된 경우 then() 메서드가 콜백을 처리하는 방법에 있습니다. 특히 약속 상태가 보류 중이 아닌 경우 then() 메서드는 콜백 실행을 다음 마이크로 작업 대기열로 적절하게 연기하지 않습니다. 그리고 이로 인해 동기 실행이 발생합니다. 예시 테스트에서는:

⟶ 약속은 '즉시 해결'이라는 가치로 즉시 해결됩니다.

⟶ promise.then()이 호출되면 상태가 이미 이행되었으므로 onFulfilled 콜백이 다음 마이크로 작업 대기열로 지연되지 않고 직접 실행됩니다.

여기서 규칙 2.2.4가 적용됩니다. 이 규칙은 Promise가 이미 해결되거나 거부된 경우에도 then() 콜백(onFulfilled 또는 onRejected)이 비동기적으로 실행되도록 보장합니다. 즉, 현재 실행 스택이 완전히 지워지고 플랫폼 코드(예: 이벤트 루프 또는 마이크로 작업 대기열)만 실행될 때까지 콜백을 실행해서는 안 됩니다.

이 규칙이 왜 중요한가요?

이 규칙은 Promise/A 사양에서 가장 중요한 규칙 중 하나입니다. 다음을 보장하기 때문입니다.

⟶ Promise가 즉시 해결되더라도 해당 then() 콜백은 이벤트 루프의 다음 틱까지 실행되지 않습니다.

⟶ 이 동작은 setTimeout 또는 process.nextTick과 같은 JavaScript의 다른 비동기 API 동작과 일치합니다.

어떻게 이를 달성할 수 있나요?

이는 setTimeout 또는 setImmediate와 같은 매크로 작업 메커니즘이나 queueMicrotask 또는 process.nextTick과 같은 마이크로 작업 메커니즘을 사용하여 달성할 수 있습니다. 마이크로 작업이나 매크로 작업 또는 이와 유사한 메커니즘의 콜백은 현재 JavaScript 실행 컨텍스트가 완료된 후에 실행되기 때문입니다.

위 문제를 해결하려면 상태가 이미 이행되거나 거부된 경우에도 해당 콜백(onFulfilled 또는 onRejected)이 queueMicrotask를 사용하여 비동기적으로 실행되도록 해야 합니다. 수정된 구현은 다음과 같습니다.

promise.then(onFulfilled, onRejected);

이전 예제 테스트 코드를 다시 실행하세요. 다음과 같은 출력이 표시됩니다.

promise2 = promise1.then(onFulfilled, onRejected);

그렇습니다.

이제 then()의 콜백이 어떻게 지연되고 다음 마이크로 작업 대기열에서 실행되어 비동기 동작을 활성화하는지 명확하게 이해해야 합니다. JavaScript로 효과적인 비동기 코드를 작성하려면 이 개념을 확실히 이해하는 것이 필수적입니다.

다음은 무엇입니까? 이 기사에서는 전체 Promises/A 사양을 다루지 않았으므로 더 깊이 이해하기 위해 나머지 부분을 구현해 볼 수 있습니다.

지금까지 읽으셨으니 재미있게 읽으셨기를 바랍니다! 기사를 공유해주세요.

팔로우:
LinkedIn, Medium, Github

위 내용은 JavaScript로 나만의 Promise 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!