Promises의 all, race, allSettled 사용하기

Promises는 자바스크립트에서 비동기를 처리하기 위해서 사용된다.

Promises는 처음에는 pending 상태였다가 처리에 성공하면 fulfilled, 실패하면 rejected 상태가 된다.

Promises 성공하거나 실패하기만 한다.

Promises.race, Promises.all, Promise.allSettled 에 대해서도 알아본다.

기본적인 Promise 사용법

const fn = () => {
  return new Promise((resolve, reject) => {
    try {
      setTimeout(() => resolve("Good!"), 5000)
    } catch (err) {
      reject(err);
    }
  });
}

fn()
  .then(el => console.log(el))
  .catch(err => console.log(err));

Promise.race 사용 예

const fast = new Promise((resolve, reject) => {
	try {
    	setTimeout(() => {
        	resolve("fast ok");
        }, 1500);
    }
    catch (err) {
    	reject(err);
    }
});

const late = new Promise((resolve, reject) => {
	try {
    	setTimeout(() => {
        	resolve("late ok");
        }, 3500);
    }
    catch (err) {
    	reject(err);
    }
});

Promise.race([fast, late])
	.then(el => console.log(el))
    .catch(err => console.log(err));

• 출력되는 값은 fast ok이다.
• 여러 개의 Promise가 경쟁하여 가장 먼저 resolve되는 객체의 값을 반환하게 된다.

Promise all 사용 예

const fast = new Promise((resolve, reject) => {
	try {
    	setTimeout(() => {
        	resolve("fast ok");
        }, 1500);
    }
    catch (err) {
    	reject(err);
    }
});

const late = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("late fail");
  }, 3500);
});

const tooLate = () => 
  new Promise((resolve, reject) => {
	try {
    	setTimeout(() => {
        	resolve("too late ok");
        }, 7500);
    }
    catch (err) {
    	reject(err);
    }
});

Promise.all([fast, late, tooLate()])
	.then(el => console.log(el))
    .catch(err => console.log(err));

• 위의 코드가 출력하는 값은 late fail이다.
• Promise.all은 여러 비동기 함수에서 하나라도 실패하면 실패한 결과를 반환한다.

const fast = new Promise((resolve, reject) => {
	try {
    	setTimeout(() => {
        	resolve("fast ok");
        }, 1500);
    }
    catch (err) {
    	reject(err);
    }
});

const late = new Promise((resolve, reject) => {
	try {
    	setTimeout(() => {
        	resolve("late ok");
        }, 3500);
    }
    catch (err) {
    	reject(err);
    }
});

const tooLate = () => 
  new Promise((resolve, reject) => {
	try {
    	setTimeout(() => {
        	resolve("too late ok");
        }, 7500);
    }
    catch (err) {
    	reject(err);
    }
});

Promise.all([fast, late, tooLate()])
	.then(el => console.log(el))
    .catch(err => console.log(err));

• 위의 코드가 출력하는 결과값은 ["fast ok","late ok","too late ok"] 이다.
• 모두 성공한 경우에 순서대로 값을 담아 반환한다.

Promise.allSettled 사용 예

const fast = new Promise((resolve, reject) => {
	try {
    	setTimeout(() => {
        	resolve("fast ok");
        }, 1500);
    }
    catch (err) {
    	reject(err);
    }
});

const late = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("late fail");
  }, 3500);
});

const tooLate = () => 
  new Promise((resolve, reject) => {
	try {
    	setTimeout(() => {
        	resolve("too late ok");
        }, 7500);
    }
    catch (err) {
    	reject(err);
    }
});

Promise.allSettled([fast, late, tooLate()])
	.then(el => console.log(el))
    .catch(err => console.log(err));

• 위의 코드가 출력하는 값은 다음과 같다.

[{status: 'fulfilled', value: 'fast ok'}, 
{status: 'rejected', reason: 'late fail'}, 
{status: 'fulfilled', value: 'too late ok'}]

• Promise.allSettled는 결과값으로 status와 value또는 reason을 객체에 담아 배열로 내보낸다.
• Promise.all과는 다르게 실패한 케이스가 있어도 모든 결과를 기다린 후 모든 결과를 알려준다.

Promise reject 처리

const time = () => {
  return new Promise((resolve, reject) => {
    try {
      throw new Error("에러 발생!");
      setTimeout(() => {
        resolve(100);
      }, 1500);    
    } catch {
      reject("ERROR 발생");
    }
  });
}

const fn = async () => {
  console.log("Start");
  try {
    const data = await time();
    console.log(data);
  } catch (e) {
    console.log(e + "!!");
  }
}

fn();

• "Start"와 "ERROR 발생!!"이 출력된다.