Promise

promise는 사용법에 대해서 정의한다.

promise 는 자바스크립트의 특징인 비동기 실행에 대해서 성공과 실패의 경우를 명시적으로 나눠주고, 비동기의 이벤트들이 순서에 대한 신뢰 없이 실행되는 것을 동기적으로 순서대로 실행할 수 있는 것을 도와준다. 프로그램을 만들다보면 비동기가 편할 때도 있지만, 비동기가 순서에 관계없이 실행되면, 순서가 중요한 로직(예를 들면 한번에 10개씩 목록을 가져오는 쇼핑몰에서 순서가 뒤죽박죽이 되면 최신 상품을 늦게 보게 된다.)에서 에러가 발생할 수 있다. 이를 편리하게 관리하게 해주는 객체가 Promise라는 게 있다.

Promise는 언제나 3가지의 상태를 가진다.

1. Pending(처리중) : 진행중인 상태
2. fulfilled(이행됨) : 성공
3. rejected(거부됨) : 오류발생

처리중 이후에는 성공 또는 오류의 상태로 넘어가게 된다.

사용하는 방법을 정의하자면

// 여러가지 일을 동시 실행
Promise.all(프로미스배열)

// 한가지 일을 실행
Promise.race(프로미스)

// 성공을 반환
Promise.resolve(성공 데이터)

// 실패를 반환
Promise.reject(에러 데이터)

// 한가지 일에 대한 프로미스 만들기
const p1 = Promise((성공, 실패) => { 하는일 })

위의 방법을 이용해서 실제로 사용하게 된다면 요런식으로 사용한다.

// 프로미스 정의하기
const p1 = new Promise(function (resolve, reject) {
  resolve("SUCCESS");
  reject("FAILURE");
});

// 정의된 프로미스 사용하기
Promise.race(p1)
  .then(function (res) {
    console.log(res);
  })
  .catch(function (err) {
    console.log(err);
  });

복잡하다... 이걸 그림 불러오기로 사용할 경우 (지정된 그림을 순서대로 보여주는게 중요할 )

// 이미지 로더
const imageLoader = function (src) {
    var p1 = new Promise(function (resolve, reject) => {
        var img = document.createElement("img");
        img.onload = function () {
            // 이미지 로드가 완료되면 완료된 이미지 태그 반
            resolve(img);
        }
        img.onerror = function (err) {
            // 이미지 로드 실패 시 실패한 에러를 반환
            reject(err);
        }
        // 이미지 로드 실시
        img.src = src;
    });

    return p1
}


// 실제 사용

const imgArr = ["img1.jpg", "img2.jpg", "img3.jpg"];
const payloads = [];
imgArr.forEach(function (img) {
    // 이미지 로더 프로미스 사용
    payloads.push(imageLoader(img));
})

// 모두가 성공해야하는 경우 (여러개를 사용하면 결과도 배열 형식으로 나옴)
Promise.all(imgArr)
    .then(function (resArr) {
        // 성공한 경우 이미지 보여주기   
    })
    .catch(function (errArr) {
        // 실패한 경우 이미지에 대한 에러 처리하기
    })

// 하나만 사용하는 경우
Promise.race(imageLoader("img1.jpg"))
    .then(function (res) {
        // 성공
    })
    .catch(function (err) {
        // 실패
    })

사용이 조금 복잡하지만 알아두면 여러 곳에 사용할 수 있다.