XPromise 구축: 맞춤형 JavaScript Promise에 대한 심층 분석-JS 튜토리얼-php.cn

JavaScript는 다른 프로세스를 차단하지 않고 데이터 가져오기, 애니메이션, 파일 처리와 같은 작업을 가능하게 하는 비동기식 특성으로 잘 알려져 있습니다. 약속은 비동기 작업을 우아하게 처리하는 핵심이며 코드를 더 깔끔하고 관리하기 쉽게 만듭니다. XPromise라는 이 프로젝트는 JavaScript Promise의 사용자 정의 구현으로, Promise 메커니즘이 내부적으로 작동하는 방식을 탐색하는 데 도움이 됩니다.

GitHub에서 전체 구현을 확인할 수 있습니다.

약속이란 무엇입니까?

JavaScript의 Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 특수 개체입니다. Promise를 사용하면 작업이 언제 완료될지 모르더라도 작업 완료 후 실행할 작업을 대기열에 추가할 수 있습니다. Promise를 독특하게 만드는 요소는 다음과 같습니다.

세 가지 상태: 약속은 보류, 이행 또는 거부
불변 상태 변경: Promise가 해결(완료 또는 거부)되면 상태를 변경할 수 없습니다.
.then 및 .catch 연결: 프라미스는 충족된 값을 처리하기 위해 .then()을 제공하고 오류에 대해 .catch()를 제공하여 구성 가능하게 만듭니다.

Building XPromise: A Deep Dive into Custom JavaScript Promises

맞춤형 약속을 구축하는 이유는 무엇입니까?

XPromise와 같은 사용자 정의 Promise를 생성하면 내부 작동 방식을 더 깊이 이해할 수 있습니다.

상태 관리: 하나의 최종 상태만 보장하는 방식으로 상태를 처리합니다.
콜백 대기열: Promise는 해결된 후 실행될 콜백을 대기열에 추가해야 합니다.
오류 처리: 기본 Promise 동작을 에뮬레이션하여 비동기 오류를 적절하게 처리하는 방법이 포함되어 있습니다.

프로젝트 연습

XPromise의 코드를 살펴보고 JavaScript의 기본 Promise처럼 작동하게 만드는 각 구성 요소를 살펴보겠습니다.

상태 및 기본 구조 설정

XPromise는 PENDING, FULFILLED, REJECTED의 세 가지 상태를 정의하는 것으로 시작합니다.

const PENDING = "PENDING";
const FULFILLED = "FULFILLED";
const REJECTED = "REJECTED";

class XPromise {
  constructor(executor) {
    this.state = PENDING;
    this.queue = [];
    doResolve(this, executor);
  }
  // ...
}

로그인 후 복사

생성자 및 초기 설정:
- XPromise는 즉시 실행되는 실행기 기능을 허용합니다.
- this.state는 현재 상태를 추적하는 반면, this.queue는 .then() 호출에 의해 대기 중인 모든 함수를 보유합니다.

then, catch 및 finally 메소드 추가

그런 다음 catch하고 마지막으로 이행, 거부 및 정리 시나리오를 처리합니다. XPromise가 연결을 달성하는 방법은 다음과 같습니다.

const PENDING = "PENDING";
const FULFILLED = "FULFILLED";
const REJECTED = "REJECTED";

class XPromise {
  constructor(executor) {
    this.state = PENDING;
    this.queue = [];
    doResolve(this, executor);
  }
  // ...
}

로그인 후 복사

then: then 메소드는 새로운 XPromise 인스턴스를 생성하고 이를 onFulfilled 및 onRejected 콜백과 함께 저장합니다. 이렇게 하면 체인의 다음 Promise가 이전 Promise의 출력을 수신하게 됩니다.
catch: 오류 처리를 위한 단축형으로 then(null, onRejected)를 호출하는 것과 동일합니다.
finally: Promise의 결과에 관계없이 실행되는 정리 작업을 처리합니다.

핸들을 사용하여 해결된 상태 관리

핸들 함수는 Promise가 아직 보류 중인지 해결되었는지 결정합니다. 보류 중인 경우 나중에 실행되도록 핸들러가 대기열에 추가됩니다. Promise가 해결되면 즉시 핸들러를 처리합니다.

then(onFulfilled, onRejected) {
  const promise = new XPromise(() => {});
  handle(this, { promise, onFulfilled, onRejected });
  return promise;
}

catch(onRejected) {
  return this.then(null, onRejected);
}

finally(onFinally) {
  return this.then(onFinally, onFinally);
}

로그인 후 복사

약속 해결 및 거부

완료 및 거부된 Promise에는 결과를 처리하기 위한 특별한 기능이 필요합니다. XPromise가 이를 달성하는 방법은 다음과 같습니다.

function handle(promise, handler) {
  while (promise.state !== REJECTED && promise.value instanceof XPromise) {
    promise = promise.value;
  }

  if (promise.state === PENDING) {
    promise.queue.push(handler);
  } else {
    handleResolved(promise, handler);
  }
}

로그인 후 복사

이행 및 거부:
- 약속을 이행하고 거부하여 약속의 상태와 값을 업데이트합니다.
- 값이 Promise이거나 Thenable인 경우 doResolve를 연기하여 올바르게 처리되었는지 확인합니다.
대기 중인 처리기 마무리:
- Promise가 해결되면 finale은 대기열을 반복하여 모든 핸들러를 순서대로 실행합니다.

실행자 함수 doResolve

doResolve 함수는 해결 및 거부 호출을 래핑하여 실행기를 안전하게 실행하여 여러 번 호출되는 경우 추가 상태 변경을 방지합니다.

function fulfill(promise, value) {
  if (value === promise) {
    return reject(promise, new TypeError());
  }

  if (value && (typeof value === "object" || typeof value === "function")) {
    let then;
    try {
      then = value.then;
    } catch (e) {
      return reject(promise, e);
    }

    if (typeof then === "function") {
      return doResolve(promise, then.bind(value));
    }
  }

  promise.state = FULFILLED;
  promise.value = value;
  finale(promise);
}

function reject(promise, reason) {
  promise.state = REJECTED;
  promise.value = reason;
  finale(promise);
}

로그인 후 복사

XPromise 사용 예

이제 제대로 작동하는 XPromise가 있으므로 간단한 예를 들어 시험해 보겠습니다.

function doResolve(promise, executor) {
  let called = false;
  function wrapFulfill(value) {
    if (called) return;
    called = true;
    fulfill(promise, value);
  }

  function wrapReject(reason) {
    if (called) return;
    called = true;
    reject(promise, reason);
  }
  try {
    executor(wrapFulfill, wrapReject);
  } catch (e) {
    wrapReject(e);
  }
}

로그인 후 복사