Promise.all은(는) 무엇인가요?

👋 😄

많은 양의 비동기 기능을 한 번에 수행해야 하는 상황에 처한 적이 있습니까? Promise.all()은 많은 수의 작업을 수행하고 이를 관리하기 쉽게 만드는 데 매우 유용합니다.

Promise.all()이란?

Promise.all() 프라미스 배열을 가져와 병렬로 실행하고 주어진 반복 가능한 결과의 배열로 해석되는 단일 프라미스를 반환하는 함수입니다.

왜 이것이 필요합니까?

단일 블록에서 1000개의 서로 다른 비동기 함수를 실행하려고 한다고 상상해 보십시오... 그렇게 하려면 영원히 걸리고 서버가 충돌할 수도 있습니다.

이제 1000개의 모든 호출을 한 번에 하나씩 수행하는 대신 Promise.all()과 병렬로 수행할 수 있습니다.

그러나 1000번의 호출로 그렇게 하는 것조차 위험할 수 있습니다. 따라서 한 단계 더 나아가 이러한 호출을 일괄적으로 수행하여 가능한 충돌 및 버그를 방지할 수 있습니다.

또 다른 가능한 시나리오는 데이터베이스에 여러 쿼리를 만들고 이러한 쿼리를 사용하여 정보에 대한 단일 응답을 작성해야 하는 것입니다.

혼란스러운 소리? 몇 가지 예를 살펴보겠습니다.

//Here we have 3 promises 
const promise1 = async () => {
  await fetch('someurl.com')
   .then(res => res.json())
   .catch(err => console.log(e))
}

const promise2 = async () => {
 try{
   const data = await api.get('someurl1.com')
   const result = await data.json()
   return sesult
  }catch(e){
  console.log(e)
 }
}

const promise3 = async () => {
 try{
   const data = await api.get('someurl2.com')
   const result = await data.json()
   return sesult
  }catch(e){
  console.log(e)
 }
}

const promise1Result = await promise1()
const promise2Result = await promise2()
await promise3()

...more code

비동기 함수와 프라미스의 경우 해결될 때까지 다른 코드가 실행되지 않는다는 것을 알고 있습니다.

이 예에서는 "추가 코드"섹션이 실행되기 전에 세 가지 비동기 함수 모두를 한 번에 하나씩 실행하고 해결해야 합니다.

이것은 앱 효율성을 죽이고 사용자에게 나쁜 경험을 가져다 줄 것입니다.

이것이 Promise.all()이 빛나는 곳입니다.

const promise1 = async () => {
  await fetch('someurl.com')
   .then(res => res.json())
}

const promise2 = async () => {
 const data = await api.get('someurl1.com')
 const result = await data.json()
   return sesult
}

const promise3 = async () => {
 const data = await api.get('someurl2.com')
 const result = await data.json()
   return sesult
}

Promise.all([ promise1, promise2, promise3 ])
  .then(response => console.log(response)) 
  .catch(error => console.log(error))

...more code

The results of each promise will be consistent with the order you passed them to Promise.all()

우리는 여전히 모든 약속이 해결될 때까지 기다려야 하지만, 이제 Promise.all()을 사용하므로 모두 동시에 실행됩니다. 이렇게 하면 속도에 의존하는 앱에 중요한 시간과 성능 저하를 줄일 수 있습니다. 얼마나 많은 약속이 서버 요청인지에 따라 잠재적인 서버 충돌로부터 당신을 구할 뿐만 아니라.

우리의 약속 중 하나가 실패하면 어떻게 됩니까?

promise.all()에 사용된 promise 중 하나라도 실패하면 모두 실패합니다. 우리의 promise.all()에서 거부를 유발합니다.

그러나 나머지 약속이 해결되기를 원하고 나중에 거부를 처리한다면 어떻게 될까요?

어떻게 하는지 살펴보겠습니다.

const promise1 = async () => {
//Use a Try/Catch to resolve the error for this promise 
//instead of relying on promise.all
 try{
   const data = await api.get('someurl.com')
   const result = await data.json()
   return sesult
  }catch(e){
  console.log(e)
 }
}

const promise2 = async () => {
//Use .catch to resolve the error for this promise
  await fetch('http://example.com')
  .then(response => response.json())
  .then(data => console.log(data));
  .catch(e => console.log(e))
}

Promise.all([ promise1, promise2 ])
  .then(response => console.log(response)) 
  .catch(e => console.log(e))

보시다시피, Promise에서 오류를 포착하는 한 Promise.all이 해결됩니다.

결론

Promise.all()은 매우 강력한 도구입니다. 이를 사용하여 프론트엔드에 대한 많은 데이터를 가져오고 백엔드에서 많은 호출을 처리하는 등의 작업을 수행할 수 있습니다. 여러 약속을 처리하는 것이 그 어느 때보다 쉬워졌기 때문에 모든 개발자가 이것을 사용하는 것이 좋습니다.

읽어주셔서 감사합니다. 이 기사를 개선할 수 있는 방법에 대해 질문이나 조언이 있으면 언제든지 Twitter에서 저에게 연락하십시오.
(: