async / await 병렬 처리 - Promise.all()

 

보고 와야 할 이전글:   https://rebornbb.tistory.com/entry/JS-async%EC%99%80-await-%EB%9E%80

 

병렬처리란 ?

병렬 처리는 여러 가지 일을 한꺼번에 하는 것과 같습니다. (예: 빨래를 돌리는 동안 설거지를 하고 청소기를 돌리는 것)

 

Promise.all 로 비동기 작업 병렬처리하기

JavaScript에서 비동기 작업을 병렬적으로 처리하기 위해 Promise.all 메서드를 사용합니다.

• Promise.all 함수는 여러개의 프로미스를 인자로 받아 하나의 프로미스를 반환하는 함수인데, 전달된 모든 프라미스가 완료될 때 까지 기다리며 그 결과로 프로미스들의 결과를 배열로 반환한다.
  이러한 동작들 때문에 Promise.all을 사용하면 비동기 작업을 병렬로 실행 할 수 있다.
• Promise.all 함수는 내부적으로 각 프로미스를 동시에 실행하고, 모든 프로미스가 완료될때까지 대기한다.
  이때 각 프로미스의 완료 순서는 상관없이 결과를 반환하는 순서는 프로미스가 전달된 순서를 따른다.
• 예를 들어 Promise.all([promise1, promise2, promise3]) 와 같이 세 개의 프로미스를 전달하면 각 프로미스는 병렬로 실행된다. 프로미스가 병렬로 실행되므로 전체 작업이 완료되는데 걸리는 시간은 가장 오래걸리는 작업의 시간에 의해 결정된다.

	async function fetchData(url) {
      // 비동기 작업을 수행하는 함수
      // 예를 들어 HTTP 요청을 보내 데이터를 가져오는 등의 작업을 수행한다고 가정
      // 이 함수는 Promise를 반환
      const response = await fetch(url); 
      return response.json(); 
    }

    async function parallelProcessing() {
      try {
        const url1 = 'https://api.example.com/data1';
        const url2 = 'https://api.example.com/data2';

        // 여러 개의 비동기 작업을 병렬로 실행
        const [data1, data2] = await Promise.all([fetchData(url1), fetchData(url2)]);

        // 작업이 완료되면 각각의 결과에 접근할 수 있다.
        console.log('Data 1:', data1);
        console.log('Data 2:', data2);
      } catch (error) {
        console.error('Error:', error);
      }
    }

    parallelProcessing();

 

예시에서 fetchData 함수는 비동기 작업을 수행하는 함수 이다. fetch를 이용해 HTTP요청을 보내고 응답을 JSON형식으로 파싱하여 반환한다.

parallelProcessing 함수에서는 Promise.all을 사용해 fetchData 함수를 병렬로 실행할 수 있다..
이때 fetchData에 url1 과 url2를 배열로 전달한다.
Promise.all 은 전달된 모든 프로미스가 완료 될때 까지 기다리며 모든 작업이 완료되면 각 작업의 결과를 배열로 반환한다.

await Promise.all([fetchData(url1),fetchData(url2)]) 구문에서 'await'를 사용하여 'Promise.all'의 결과를 대기하고 해당 결과를 [data1, data2] 와같은 배열로 할당한다. 이후 각각의 결과에 접근하여 원하는 작업을 수행할 수 있다.

이렇게 하면 fetchData(url1) 과 fetchData(url2)가 동시에 실행이 되며 두작업이 완료되어야만 다음 단계로 진행된다.

 

Promise.all의 장점:

• 병렬 처리: 여러 비동기 작업을 동시에 실행하여 성능을 향상시킵니다.
• 간결한 코드: Promise.all을 사용하면 복잡한 비동기 처리 로직을 간결하게 표현할 수 있습니다.
• 오류 처리: Promise.all은 모든 Promise가 resolve될 때까지 기다리므로, 중간에 에러가 발생하더라도 catch 블록에서 에러를 처리할 수 있습니다.

Promise.all의 단점:

• 순서 보장 X: Promise.all은 Promise가 resolve되는 순서를 보장하지 않습니다. 따라서 결과 배열의 순서가 항상 일정하지 않을 수 있습니다.
• 모든 Promise가 resolve되어야 함: Promise.all은 모든 Promise가 resolve되어야만 결과를 반환합니다. 만약 하나라도 reject되면 전체 Promise.all이 reject됩니다.

 

 

출처 : https://velog.io/@chosule/Javascript-async-%EC%99%80-await