JavaScript ES6 문법 - Promise

박재휘·2024년 3월 4일

JavaScript

목록 보기

13/19

1. Promise란?

공식페이지에서는 다음과 같이 설명한다.

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.

Promise는 콜백함수의 또다른 디자인패턴이다.
Promise 객체는 성공(resolve) 또는 실패(reject)의 상태를 나타낸다.
성공시 then(), 실패시 catch() 함수가 실행된다.
성공 또는 실패시 finally() 함수가 실행된다.

2. Promise장점

콜백함수보다 좋은 점이 있다.

코드가 더 깔끔해진다.
실패시 catch를 사용하여 특정 코드를 실행할 수 있다.

3. 사용법

new Promise() 문법으로 myPromise라는 변수 오브젝트를 생성하면 된다. 변수 이름은 자유롭게 작명할 수 있다.

객체생성

var myPromise = new Promise();

Promise의 상태 나타내기

성공 (resolve)

new Promise()안에 콜백함수를 추가하면 성공/실패 상태를 나타낼 수 있다.

var myPromise = new Promise(function (resolve, reject) {
  resolve(); // 성공
});

myPromise.then(() => { console.log("성공!"); }).catch(() => { console.log("실패!"); });

콘솔창

resolve() 사용시 then()함수가 실행된다.

실패 (reject)

var myPromise = new Promise(function (resolve, reject) {
  reject(); // 실패
});

myPromise.then(() => { console.log("성공!"); }).catch(() => { console.log("실패!"); });

콘솔창

reject() 사용시 catch()함수가 실행된다.

4. 예시

이미지 로드 성공시 이미지 로드 성공!을 출력하고 로드 실패시 이미지 로드 실패!를 출력해보자.

이미지 로딩의 성공/실패는 이벤트리스너의 load, error를 통해 가능하다.

  <body>
    <img
      id="img"
      src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/220px-Google_2015_logo.svg.png"
      width="100px"
    />
    
    <script>
      var myPromise = new Promise((resolve, reject) => {
        let img = document.getElementById("img");
        img.addEventListener("load", () => {
          resolve(); // 로드 성공시 resolve() 실행
        });
        img.addEventListener("error", () => {
          reject(); // 로드 실패시 reject() 실행
        });
      });

      myPromise
        .then(() => {
          console.log("이미지 로드 성공!");
        })
        .catch("이미지 로드 실패!");
    </script>
    
  </body>