ES6 Promise

ES6에서 도입된 Promise는 비동기 작업을 더 쉽게 관리할 수 있는 객체이다. Promise는 대기(pending), 이행(fulfilled), 거부(rejected) 등 3가지 상태를 가질 수 있다.

1. 대기(pending): 비동기 처리 로직이 아직 완료되지 않은 상태
2. 이행(fulfilled): 비동기 처리가 완료되어 프로미스가 결과 값을 반환한 상태
3. 거부(rejected): 비동기 처리가 실패하거나 오류가 발생한 상태

기본 사용법

Promise 객체는 new Promise() 생성자 함수를 통해 생성된다. 이 생성자 함수는 resolve와 reject라는 이름의 두 개의 콜백 함수를 매개변수로 받는 콜백 함수를 인수로 전달받는다.

const myPromise = new Promise((resolve, reject) => {
  if (/* 비동기 작업이 성공 */) {
    resolve('성공');
  } else {
    reject('실패');
  }
});

.then()과 .catch()

Promise 객체에는 .then()과 .catch()라는 두 개의 메서드가 있다. .then() 메서드는 Promise가 이행된 경우 실행할 콜백을 등록하며, .catch() 메서드는 거부된 경우 실행할 콜백을 등록한다.

myPromise
  .then(result => {
    console.log('성공:', result);
  })
  .catch(error => {
    console.log('실패:', error);
  });

.then()은 새로운 Promise 객체를 반환하기 때문에 메서드 체이닝을 통해 여러 비동기 작업을 순차적으로 처리할 수 있다.

fetchSomething()
  .then(processData)
  .then(saveData)
  .catch(handleErrors);

코드 분석

fetchSomething()
  .then(processData)
  .then(saveData)
  .catch(handleErrors);

이 코드는 JavaScript의 Promise와 fetch API (또는 그와 유사한 비동기 함수 fetchSomething)를 이용하여 비동기 작업을 수행하는 예이다. 코드의 각 부분을 분석해보면 다음과 같다.

1. fetchSomething()
   fetchSomething()은 Promise를 반환하는 비동기 함수이다. 이 함수는 원격 리소스를 가져오는 작업이나 다른 비동기 작업을 수행할 수 있다.

2. .then(processData)
   fetchSomething() 함수가 성공적으로 완료되면 (resolve가 호출되면), processData 함수가 실행된다. processData는 fetchSomething() 함수의 결과를 인수로 받아 처리한다.

3. .then(saveData)
   processData 함수가 성공적으로 완료된 후 그 결과를 saveData 함수로 전달한다. saveData 함수는 이 결과를 저장하거나 다른 작업을 수행할 수 있다.

4. .catch(handleErrors)
   fetchSomething, processData, 또는 saveData 중 하나라도 실패하면 (reject가 호출되면), handleErrors 함수가 실행됩니다. 이 함수는 발생한 오류를 처리한다.

이 코드를 통해 Promise를 이용한 비동기 작업의 체이닝과 오류 처리 방법을 확인할 수 있다. 여기서는 세 단계의 작업—데이터 가져오기, 데이터 처리, 데이터 저장—을 수행하고, 어느 단계에서든 오류가 발생하면 handleErrors 함수를 통해 처리한다.

Promise.all()과 Promise.race()

Promise.all()은 주어진 모든 프로미스가 이행되었을 때 새로운 프로미스를 이행하는 메서드다. 주어진 프로미스 중 하나라도 거부되면 새로운 프로미스도 거부된다.

Promise.race()는 주어진 프로미스 중 하나가 이행되거나 거부되면 새로운 프로미스를 이행하거나 거부하는 메서드이다.

const promise1 = new Promise((resolve, reject) => { setTimeout(resolve, 1000, 'one'); });
const promise2 = new Promise((resolve, reject) => { setTimeout(resolve, 2000, 'two'); });
const promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 3000, 'three'); });

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // ['one', 'two', 'three']
});

Promise.race([promise1, promise2, promise3]).then((value) => {
  console.log(value); // 'one'
});

이러한 특성으로 인해 Promise는 비동기 작업을 쉽고 안정적으로 처리할 수 있도록 도와준다.

코드 분석

이 코드는 JavaScript의 Promise 객체와 Promise.all() 및 Promise.race() 메서드를 사용하여 비동기 작업을 처리하는 예시이다. 코드의 주요 부분을 분석해보면 다음과 같다.

1. Promise 객체 생성
   promise1, promise2, promise3라는 세 개의 Promise 객체를 생성한다. 각각은 setTimeout을 이용하여 1초, 2초, 3초 후에 resolve를 호출하여 프로미스를 이행(fulfill) 상태로 변경한다. 이때 각 프로미스는 'one', 'two', 'three'라는 값을 갖게 된다.

const promise1 = new Promise((resolve, reject) => { setTimeout(resolve, 1000, 'one'); });
const promise2 = new Promise((resolve, reject) => { setTimeout(resolve, 2000, 'two'); });
const promise3 = new Promise((resolve, reject) => { setTimeout(resolve, 3000, 'three'); });

2. Promise.all()
   Promise.all()은 인수로 주어진 모든 프로미스(promise1, promise2, promise3)가 이행되면 하나의 배열로 결과를 반환하는 새로운 프로미스를 생성한다. 이 경우, 모든 프로미스가 1초, 2초, 3초 후에 이행되므로 ['one', 'two', 'three'] 배열이 .then()의 콜백 함수로 전달된다.

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // ['one', 'two', 'three']
});

3. Promise.race()
   Promise.race()는 주어진 프로미스 중 하나가 이행되거나 거부되는 즉시, 그 결과나 오류를 갖는 새로운 프로미스를 반환한다. 이 예에서는 promise1이 가장 빠르게 1초 후에 이행되므로, 그 결과값 'one'이 .then()의 콜백 함수로 전달된다.

Promise.race([promise1, promise2, promise3]).then((value) => {
  console.log(value); // 'one'
});

이 코드를 통해 Promise.all()과 Promise.race()의 동작 방식을 이해할 수 있다. Promise.all()은 모든 프로미스가 완료될 때까지 기다리며, Promise.race()는 가장 먼저 완료되는 프로미스의 결과를 반환한다.