Explorando 약속: .all 대 .allSettled / .race 대 .any

2015년 ECMAScript 6(ES2015) JavaScript 사양이 출시되면서 비동기 작업을 처리할 때 개발자로서의 경험을 덜 복잡하게 만들겠다는 약속이 나타났습니다.

JavaScript를 공부하거나 작업하는 경우 아마도 이미 Promise.all() 또는 Promise.race()를 사용해 본 적이 있을 것입니다. 그리고 개발자의 삶을 더욱 쉽게 만들기 위해 최신 버전의 JavaScript가 출시되면서 Promise.allSettled() 및 Promise.any()(각각 ES11 및 ES2021)라는 두 가지 새로운 Promises 메서드에 액세스할 수 있게 되었습니다.

그런데 이들의 차이점은 무엇이며 각각 언제 사용해야 할까요?

요약

Promise.all 대 Promise.allSettled: 결과에 집중
Promise.race 대 Promise.any: 속도에 중점

---

Promise.all 대 Promise.allSettled: 결과에 집중

특정 시점에 다양한 API 호출을 실행해야 하는 애플리케이션을 개발하고 있다고 상상해 보세요. 이러한 호출이 서로 독립적인 경우 모든 호출을 동시에 실행하여 코드를 더 간결하게 만드는 것 외에도 애플리케이션 성능을 향상시키는 것이 좋습니다.

약속.모두()

• Promise의 배열을 인수로 받습니다.
• 작업을 동시에(병렬로) 실행합니다.
• 모든 Promise가 성공적으로 해결되면 해결됩니다.
• Promise 중 하나가 실패하면 즉시 거부하고 다음 Promise의 실행을 차단합니다.

async function buscarDadosParalelo() {  
  const [usuarios, produtos] = await Promise.all([
    fetch('/api/usuarios').then(resp => resp.json()),
    fetch('/api/produtos').then(resp => resp.json()),
  ]);

  return { usuarios, produtos };
}

Promise.all()은 모든 Promise가 성공적인지 확인하고 다른 작업을 수행하기 전에 함수가 필요한 모든 결과를 수신해야 할 때

매우 유용합니다. >

Promise.allSettled()

• 또한 Promise의 배열을 인수로 받습니다.
• 작업을 동시에(병렬로) 실행합니다.
• 성공 또는 실패 여부에 관계없이 모든 Promise의 실행이 완료되면 해당 상태(성취 또는 거부)가 포함된 각 Promise에 대한 객체를 반환합니다.
• 결코 거부하지 않으며 결과적으로 Promise 실행을 차단하지 않습니다.

async function buscarDadosParaleloComFalhas() {   
  const resultados = await Promise.allSettled([
    fetch('/api/usuarios').then(resp => resp.json()),
    fetch('/api/produtos').then(resp => resp.json()),
  ]);

    // Verificar cada resultado individualmente:
  const dados = resultados.map(resultado => {
    if (resultado.status === 'fulfilled') {
      return resultado.value;
    } else {
      console.error(resultado.reason);
      return null;
    }
  });

  return dados;
}

Promise.allSettled()는 각 호출의 성공 또는 오류에 대한 개별 처리를 허용하는 것 외에도 Promise가 실패로 끝나는 경우 애플리케이션을 차단하지 않습니다. 이는 모든 요청이 해결되거나 거부될 때까지 기다리고 사용자가 각 사례를 평가하고 처리할 수 있도록 하는 상태 보고서와 같습니다.

요약으로 돌아가기

---

Promise.race 대 Promise.any: 속도에 집중

반면에 Promise.race() 및 Promise.any()에 대해 이야기할 때는 비동기 작업 집합에서 첫 번째 응답을 처리

하는 접근 방식에 대해 이야기합니다.

약속.경주()

• 스크립트로 작성된 약속의 배열을 획득하세요.
• 작업을 동시에(병렬로) 실행합니다.
• 완료되거나 거부된 첫 번째 Promise를 반환합니다.

async function buscarDadosParalelo() {  
  const [usuarios, produtos] = await Promise.all([
    fetch('/api/usuarios').then(resp => resp.json()),
    fetch('/api/produtos').then(resp => resp.json()),
  ]);

  return { usuarios, produtos };
}

Promise.race()는 빠른 응답이 필요할 때 매우 유용합니다. 성공이든 오류이든 상관없이 사용 가능한 첫 번째 반환입니다. 또한 위의 예에서와 같이 timeouts와 함께 널리 사용되어 제한 시간 내에 응답이 있는지 확인하고 느린 요청이 리소스를 계속 소모하는 것을 방지할 수 있습니다.

약속.아무거나()

• 또한 스크립트로 작성된 Promise의 배열도 얻을 수 있습니다.
• 작업을 동시에(병렬로) 실행합니다.
• 거절을 무시하고 성공적으로 완료된 첫 번째 Promise를 반환합니다.
• 모든 Promise가 거부된 경우에만 거부됩니다.

async function buscarDadosParaleloComFalhas() {   
  const resultados = await Promise.allSettled([
    fetch('/api/usuarios').then(resp => resp.json()),
    fetch('/api/produtos').then(resp => resp.json()),
  ]);

    // Verificar cada resultado individualmente:
  const dados = resultados.map(resultado => {
    if (resultado.status === 'fulfilled') {
      return resultado.value;
    } else {
      console.error(resultado.reason);
      return null;
    }
  });

  return dados;
}

Promise.any()는 적어도 하나의 요청을 성공적으로 완료해야 할 때 유용하며, 대체 및 중복에 이상적입니다. 여러 소스(CDN, 로컬 등)에서 리소스를 로드하거나 장애 발생 시 다른 서버에 연결하세요.

요약으로 돌아가기

---

점점 비동기화되는 디지털 세계에서 JavaScript로 여러 동시 작업을 관리하는 방법을 이해하는 것은 개발자에게 필수적인 기술이 되었습니다. 이 기사에서는 몇 가지 예를 통해 몇 가지 중요한 Promises 메소드를 살펴보고 각 메소드의 작동 방식을 보여주며, 더 중요하게는 다른 메소드 중 하나를 선택해야 하는 시기와 이유를 보여줍니다.

다음에 또 만나요(약속곧 돌아오겠습니다)!

위 내용은 Explorando 약속: .all 대 .allSettled / .race 대 .any의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!