프로그래밍 「 자바스크립트 편」JavaScript의 Promise.allSettled()

JavaScript에서 약속으로 작업하고 모든 것을 거부하고 망칠 때 좌절감을 느낀 적이 있습니까?

약속 기반 코드를 작성하면 모든 것이 순조롭게 진행되고 붐이 일어 나면서 하나의 작은 약속이 거부되고 전체 체인이 무너집니다.

코드가 멈추고 JavaScript가 왜 그 작은 딸꾹질을 무시하고 즐거운 길을 계속할 수 없는지 궁금해합니다. 글쎄, 친구, 나는 당신에게 좋은 소식이 있습니까?

만나다, 당신의 새로운 가장 친한 친구, 그리고 당신이 필요로 하는 줄도 몰랐던 약속. 게임 체인저로, 모든 약속이 해결될 때까지 기다렸다가(해결 또는 거부) 결과에 따라 조치를 취할 수 있습니다.Promise.allSettled()Promise.allSettled()

더 이상 망가진 약속 체인이나 처리되지 않은 거부가 없습니다. 순수하고 순수한 약속의 행복. 잘 알려지지 않았지만 믿을 수 없을 정도로 유용한 이 promise 메서드에 대해 자세히 알아보고 이 메서드가 비동기 JavaScript 코드를 얼마나 단순화할 수 있는지 알아보세요.

Promise.allSettled()은(는) 무엇이죠?

따라서 JavaScript의 Promise.allSettled() 메서드를 사용하고 싶지만 작동 방식이나 사용 이유가 확실하지 않습니다. 걱정 마, 내가 너를 덮었어.

Promise.allSettled() 당신이 주는 모든 약속이 해결되기를 기다린다, 즉 해결하거나 거부하는 것을 의미합니다. 그런 다음 각 promise의 상태와 값 또는 이유와 함께 개체 배열을 반환합니다.

이는 완료했는지 확인하려는 비동기 작업이 여러 개 있지만 일부 작업이 실패하더라도 반드시 신경 쓰지 않는 경우에 유용합니다.

예를 들어 promise를 반환하는 세 개의 API 호출이 있고 하나가 실패하더라도 성공한 호출에서 모든 데이터를 다시 가져오려고 한다고 가정해 보겠습니다. 당신은 할 수 있습니다 :

Promise.allSettled([apiCall1(), apiCall2(), apiCall3()]).then((results) => {});

이렇게 하면 세 가지 API 호출이 모두 실행되고 모두 해결되면 콜백이 호출됩니다. 결과 배열에는 각 약속에 대해 하나씩, 'fulfilled' 상태와 데이터 또는 'rejected' 상태와 오류가 있는 세 개의 개체가 있습니다..then()

성공적인 호출을 가져오도록 필터링하고 해당 데이터를 계속 사용할 수 있습니다.

기억해야 할 핵심 사항은 다음과 같습니다.

• Promise.allSettled() 모든 입력 약속이 정산될 때까지 기다렸다가 결과를 반환합니다.
• 정산은 해결(이행) 또는 거부됨을 의미합니다.
• 각 입력 약속에 대한 상태 및 값/이유가 있는 개체 배열을 반환합니다.
• 일부 거부 된 경우에도 성공적인 약속을 처리 할 수 있습니다.

문제와 해결책 Promise.all()Promise.allSettled()

Promise.all() 여러 약속이 완료 될 때까지 기다렸다가 해결 된 모든 값의 배열을 얻으려는 경우에 유용합니다. 그러나 한 가지 큰 단점이 있습니다 : 약속 중 하나라도 거부하면 전체가 즉시 거부합니다.Promise.all()

이것은 경우에 따라 문제가 될 수 있습니다. 예를 들어 세 개의 서로 다른 백엔드 서비스에 요청하고 다른 두 서비스가 성공하는 한 하나가 실패하더라도 별로 신경 쓰지 않는다고 가정해 보겠습니다. 를 사용하면 거부된 약속 하나가 전체 그룹을 거부하고 다른 약속의 성공적인 응답을 놓치게 됩니다.Promise.all()

다행히 간단한 해결책이 있습니다. 이는 이와 유사하게 작동하지만 약속이 거부되는 경우 즉시 거부하는 대신 모든 약속이 해결될 때까지 기다린 다음(해결 또는 거부) 각 약속의 상태 및 값/이유가 포함된 개체 배열을 반환합니다.Promise.allSettled()Promise.all()

예를 들어:

Promise.allSettled([
  Promise.resolve(1),
  Promise.reject(new Error("2")),
  Promise.resolve(3),
]).then((results) => {
  // results is an array of:
  // {status: "fulfilled", value: 1}
  // {status: "rejected", reason: Error}
  // {status: "fulfilled", value: 3}
});

보시다시피 두 번째 약속이 거부되더라도 다른 약속에서 확인된 값을 가져옵니다. 이렇게 하면 성공적인 응답을 놓치지 않고 거부를 정상적으로 처리할 수 있습니다.

Promise.allSettled() 이러한 유형의 상황에서 더 많은 유연성을 제공합니다. 일부 거부에 관계없이 모든 약속에 대한 전체 그림을 얻을 수 있으므로 해결된 값을 계속 사용하고 거부를 적절하게 처리할 수 있습니다.

따라서 다음에 여러 약속을 기다려야 하지만 거부로 인해 해결된 값을 놓칠 여유가 없을 때 반드시 손을 뻗으십시오! Promise API에 매우 유용한 추가 기능입니다.Promise.allSettled()

다음에 대한 일반적인 질문 Promise.allSettled()

코드 속도가 느려지나요?Promise.allSettled()

설마. 당신이 전달한 모든 약속이 이행되거나 거부되어 해결되기를 기다리기만 하면 됩니다. 성능에 영향을 줄 수 있는 다른 작업은 수행하지 않습니다.Promise.allSettled()

그래도 오류를 잡을 수 있습니까?Promise.allSettled()

예, 당신은 절대적으로 할 수 있습니다! 각 약속이 성취되었는지 거부되었는지에 관계없이 각 약속의 결과를 알려 드릴 것입니다.Promise.allSettled()

거부된 약속의 경우 거부된 이유(일반적으로 오류)를 얻게 됩니다. 호출 처리기에서 이러한 오류를 catch할 수 있습니다..catch()Promise.allSettled()

vs 는 언제 사용해야 하나요?Promise.allSettled()Promise.all()

여러 promise를 병렬로 실행하되 거부된 단일 promise로 인해 전체 그룹이 거부되는 것을 원하지 않을 때 사용합니다.Promise.allSettled()

예를 들어 여러 타사 API에서 데이터를 가져오는 경우 한 API에서 거부된 약속이 다른 API에서 데이터를 가져오는 것을 중지해서는 안 됩니다.

promise를 병렬로 실행하되 코드를 계속하기 위해 모두 성공적으로 완료해야 하는 경우에 사용합니다.Promise.all()

예를 들어 페이지에 표시하기 위해 두 API에서 데이터를 가져와야 하는 경우 데이터를 렌더링하기 전에 두 promise를 모두 이행해야 합니다.

합의 된 약속의 결과를 얻을 수 있습니까?

예! 각 promise의 상태 및 값/이유가 포함된 개체 배열을 반환합니다. 예를 들어:Promise.allSettled()

Promise.allSettled([
  Promise.resolve(1),
  Promise.reject(new Error("2")),
  Promise.resolve(3),
]).then((results) => {
  console.log(results);
  /*
    [
      { status: "fulfilled", value: 1 },
      { status: "rejected", reason: Error: 2 },
      { status: "fulfilled", value: 3 }
    ]
    */
});

약속이 이행되었는지 거부되었는지에 관계없이 모든 약속에 대한 정보를 얻을 수 있으므로 병렬 작업에 대한 전체 그림을 볼 수 있습니다.

결론

그래서 당신은 그것을 가지고 있습니다. 필요한 줄도 몰랐던 편리한 방법입니다.Promise.allSettled()

더 이상 잠재적인 거부를 처리하기 위해 try/catch를 래핑할 필요가 없습니다. 당신은 당신을 위해 모든 것을 처리하고 해결 된 값에만 집중할 수 있습니다. 비동기 코드가 더 깨끗하고 읽기 쉬워집니다.Promise.all()Promise.allSettled()