[JS]병렬적으로 비동기 처리하기

비동기를 병렬적으로 수행하는 것에는 크게 3가지 방법이 있습니다.

 

1. Promise.all

순회 가능한 객체에 주어진 모든 프로미스가 이행한 후, 혹은 프로미스가 주어지지 않았을 때 이행하는 Promise를 반환합니다. 주어진 프로미스 중 하나가 거부하는 경우, 첫 번째로 거절한 프로미스의 이유를 사용해 자신도 거부합니다.

입력 값으로 들어온 프로미스 중 하나라도 거부 당하면 Promise.all()은 즉시 거부합니다. 

 

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// Expected output: Array [3, 42, "foo"]

 

2. Promise.allSettled

Promise.allSettled() 메서드는 주어진 모든 프로미스를 이행하거나 거부한 후, 각 프로미스에 대한 결과를 나타내는 객체 배열을 반환합니다.

일반적으로 서로의 성공 여부에 관련 없는 여러 비동기 작업을 수행해야 하거나, 항상 각 프로미스의 실행 결과를 알고 싶을 때 사용합니다.

 

예를 들어, 엄청나게 많은 양의 데이터를 업로드 해야 하고, 그 중 업로드에 실패한 파일들만 모아서 다시 업로드를 하고 싶다면 Promise.allSettled를 사용할 수 있다.

Promise.allSettled를 사용한다면

1. 비동기 요청을 병렬적으로 처리해서 업로드 속도를 단축할 수 있고, 

2. resolve, reject 모든 비동기 요청이 끝날 때까지 기다린 후에 결과 반환하기 때문에 실패한 파일들만 찾아낼 수 있다.

 

 

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) =>
  setTimeout(reject, 100, 'foo'),
);
const promises = [promise1, promise2];

Promise.allSettled(promises).then((results) =>
  results.forEach((result) => console.log(result.status)),
);

// Expected output:
// "fulfilled"
// "rejected"

 

Promise.all을 사용해서 이런식으로 Promsie.allSettled를 구현할 수도 있다.

function allSettled(promises) {
    let wrappedPromises = promises.map(p => Promise.resolve(p)
        .then(
            val => ({ status: 'fulfilled', value: val }),
            err => ({ status: 'rejected', reason: err })));
    return Promise.all(wrappedPromises);
}

 

 

 

 

 

3. Promise.race

iterable 안에 있는 프로미스 중에 가장 먼저 완료된 것의 결과값으로 그대로 이행하거나 거부합니다.

 

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
  // Both resolve, but promise2 is faster
});
// Expected output: "two"

 

 

 

위 세가지 메서드 모두 대부분의 브라우저에서 호환된다.

 

 

 

 

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

https://stackoverflow.com/questions/30569182/promise-allsettled-in-babel-es6-implementation