튜토리얼: JavaScript에서 폴리필 Promise.allSettled를 처음부터 구현하기

JavaScript는 ES2020에서 Promise.allSettled를 도입하여 여러 비동기 작업 작업을 더 쉽게 만들었습니다. Promise가 거부되면 단락되는 Promise.all과 달리 Promise.allSettled는 성공 여부에 관계없이 모든 Promise에서 결과를 얻을 수 있도록 보장합니다.

이 튜토리얼에서는 처음부터 구축하는 데 중점을 두고 Promise.allSettled를 직접 구현하는 과정을 안내하겠습니다. 또한 Promise가 배후에서 어떻게 작동하는지 살펴보고 JavaScript를 강력하게 만드는 비동기 동작을 이해하는 데 도움을 줄 것입니다.

Promise.allSettled란 무엇입니까?

코드 작성을 시작하기 전에 Promise.allSettled가 수행하는 작업을 자세히 살펴보겠습니다.

• 입력: 약속의 배열
• 출력: 각 약속의 결과를 설명하는 객체 배열을 사용하여 모든 입력 약속이 완료된 후(실행 또는 거부) 해결되는 약속입니다.

배열의 각 개체에는 다음이 포함됩니다.

• 상태: "이행됨" 또는 "거부됨".
• value: Promise가 해결된 경우 값, 거부된 경우 이유입니다. 예:

const promises = [
  Promise.resolve('Success'),
  Promise.reject('Failure'),
  Promise.resolve('Complete')
];

Promise.allSettled(promises).then(results => {
  console.log(results);
});

출력:

[
  { status: 'fulfilled', value: 'Success' },
  { status: 'rejected', reason: 'Failure' },
  { status: 'fulfilled', value: 'Complete' }
]

이 방법은 성공 여부에 관계없이 모든 약속이 완료될 때까지 기다려야 할 때 이상적입니다.

Promise.allSettled를 직접 구현하는 이유는 무엇입니까?

이제 이 기능을 최신 브라우저에서 사용할 수 있지만 직접 구현하면 JavaScript Promise의 작동 방식을 더 깊이 이해할 수 있습니다. 또한 ES2020 기능을 기본적으로 지원하지 않는 이전 환경과의 호환성도 보장합니다.

Promise.allSettled 구현을 위한 단계별 가이드

Promise.allSettled의 동작을 모방하는 allSettled라는 함수를 만들겠습니다. 단계별로 구축해 보겠습니다.

1단계: 래퍼 함수 생성

이 함수는 Promise 배열을 받아 새 Promise를 반환합니다. 이 새로운 약속은 모든 입력 약속이 해결되면(해결 또는 거부) 해결됩니다.

function allSettled(promises) {
  // This will return a new promise that resolves when all promises settle
  return new Promise((resolve) => {
    // Implementation goes here
  });
}

2단계: 각 약속 처리

배열의 각 약속에 대해 해결 또는 거부 여부를 추적해야 합니다. 각 Promise를 .then() 및 .catch()로 래핑하여 상태를 캡처합니다.

function allSettled(promises) {
  return new Promise((resolve) => {
    let results = [];
    let count = 0;

    promises.forEach((promise, index) => {
      // Wrap the promise with a .then() and .catch() to capture the result
      promise
        .then((value) => {
          results[index] = { status: 'fulfilled', value };
        })
        .catch((reason) => {
          results[index] = { status: 'rejected', reason };
        })
        .finally(() => {
          count++;
          // Once all promises have settled, resolve the outer promise
          if (count === promises.length) {
            resolve(results);
          }
        });
    });
  });
}

설명:

1. 외부 약속 만들기:

allSettled 함수는 새로운 Promise를 반환합니다. 이 약속은 모든 입력 약속이 확정되면 해결됩니다.

2. 약속 반복:

.forEach를 사용하여 promise 배열을 반복합니다. 각 Promise에 대해 .then()(해결된 Promise의 경우) 및 .catch()(거부된 Promise의 경우)를 사용하여 결과를 추적합니다.

3. 녹화 결과:

각 약속의 결과는 결과 배열에 저장됩니다. Promise가 해결되면 객체에는 { status: 'fulfilled', value }가 포함됩니다. 거부하면 { status: 'rejected', 이유 }를 저장합니다.

4. 확정된 약속 계산:

우리는 얼마나 많은 약속이 확정되었는지 추적하기 위해 count 변수를 사용합니다. Promise가 완료될 때마다(.then() 또는 .catch()를 통해) 개수가 증가합니다. 개수가 입력 배열의 길이와 같으면 결과 배열로 외부 약속을 해결합니다.

3단계: allSettled 함수 테스트

이제 이 사용자 정의 구현을 테스트해 보겠습니다.

const promises = [
  Promise.resolve('Success'),
  Promise.reject('Failure'),
  Promise.resolve('Complete')
];

Promise.allSettled(promises).then(results => {
  console.log(results);
});

출력:

[
  { status: 'fulfilled', value: 'Success' },
  { status: 'rejected', reason: 'Failure' },
  { status: 'fulfilled', value: 'Complete' }
]

예상대로 이 함수는 모든 약속이 확정될 때까지 기다리고 결과 배열은 해결 또는 거부 여부를 포함하여 각 약속에 대한 자세한 정보를 제공합니다.

약속에 대한 더 깊은 조사

이해를 돕기 위해 약속의 작동 방식을 자세히 살펴보겠습니다.

• 프라미스는 비동기 작업의 최종 결과를 나타냅니다. Promise가 생성되면 보류 상태입니다.
• 약속은 다음과 같습니다.

작업이 성공적으로 완료되면 해결(이행)됩니다.

작업 실패 시 거부됩니다.

성공 또는 거부 시 확정

then() 메소드를 사용하면 Promise가 해결될 때 실행될 함수를 지정할 수 있으며, catch()를 사용하면 거부를 처리할 수 있습니다. finally()를 사용하면 중복 없이 약속 확정(성공 또는 실패)을 처리할 수 있습니다.

결론

Promise.allSettled를 직접 구현하는 것은 기본 수준에서 Promise가 어떻게 작동하는지 이해하는 환상적인 방법입니다. 중요한 점은 Promise.allSettled는 거부가 발생하면 중지되는 Promise.all과 달리 모든 Promise가 완료될 때까지 기다린다는 것입니다.

이를 처음부터 구현함으로써 깔끔하고 효율적인 방식으로 여러 비동기 작업을 처리하는 방법도 배웠습니다. 이제 이 지식을 사용하여 기본적으로 최신 기능을 지원하지 않는 환경을 포함하여 모든 JavaScript 환경에서 Promise를 사용할 수 있습니다.

위 내용은 튜토리얼: JavaScript에서 폴리필 Promise.allSettled를 처음부터 구현하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!