프로미스는 비동기 작업의 결과를 관리하는 객체로, 콜백 함수 대신 사용하여 코드 가독성을 높입니다.

기존의 콜백 방식 예시

{
  const fetchData = callback => {
    console.log('작업 시작');
    setTimeout(() => {
      callback && callback();
    }, 1000);
  }

  fetchData(() => {
    console.log('타임아웃 완료');
  });
}

ES6 프로미스 사용 예시

{
  const fetchData = (name) => {
    console.log('작업 시작');
    return new Promise((success, failure) => {
      setTimeout(() => {
        success(name);
      }, 1000);
    });
  }
  fetchData('완료').then(result => {
    console.log(result);
  });
}

프로미스 체이닝과 에러 처리

{
  const validateNumber = num => {
    return new Promise((success, failure) => {
      if (num > 0) {
        success(num);
      } else {
        failure(new Error('음수 입력'));
      }
    });
  }
  validateNumber(2).then(r => {
    console.log(r);
  }).catch(err => {
    console.error(err.message);
  });
  validateNumber(-2).then(r => {
    console.log(r);
  }).catch(err => {
    console.error(err.message);
  });
}

이 예제는 숫자가 0보다 클 때 정상 처리, 작을 때 에러 발생을 보여줍니다. then과 catch를 통해 체인 처리가 가능합니다.

프로미스의 두 가지 주요 메서드

all 메서드는 모든 비동기 작업이 완료된 후 콜백 실행, 일반적으로 이미지 로딩 시 사용됩니다.

{
  function createImage(src) {
    return new Promise((success, failure) => {
      const img = document.createElement('img');
      img.src = src;
      img.onload = () => success(img);
      img.onerror = () => failure('이미지 로딩 실패');
    });
  }

  function displayImages(images) {
    images.forEach(img => {
      console.log(img.src);
      document.body.appendChild(img);
    });
  }

  Promise.all([
    createImage('http://pic.baike.soso.com/ugc/baikepic2/14871/20170111115043-89387261.jpg/0'),
    createImage('http://pic9.photophoto.cn/20081105/0036036315103765_b.jpg'),
    createImage('http://tpic2.eastlady.cn/uploads/tu/201710/161/S1.jpg')
  ]).then(displayImages);
}

이 코드는 3개의 이미지가 모두 로딩된 후 화면에 표시합니다.

race 메서드는 가장 먼저 완료된 비동기 작업의 결과를 처리합니다.

{
  function createImage(src) {
    return new Promise((success, failure) => {
      const img = document.createElement('img');
      img.src = src;
      img.onload = () => success(img);
    });
  }

  function timeoutPromise() {
    return new Promise((success, failure) => {
      setTimeout(() => {
        success('시간 초과');
      }, 5000);
    });
  }

  Promise.race([
    createImage('http://tpic2.eastlady.cn/uploads/tu/201710/161/S1.jpg'),
    timeoutPromise()
  ]).then(result => {
    console.log(result);
  });
}

이 예제는 이미지 로딩과 시간 초과 중 먼저 완료된 작업을 처리합니다.