Promise

PROMISE

자바스크립트 비동기 처리에 사용되는 객체이다. 동기적인 것처럼 보여줄 수 있다.

Why?

비동기적으로 데이터를 요청해서 서버에서 받아오기 전에 사용하게되는 문제점을 해결하기 위한 방법 중 하나이다.

특징

비동기 로직에서 콜백함수를 분리했다는 점이 가장 큰 특징이다.

thentable로 알려진 syntax 코드 구조를 사용해서 마치 synchronous한 코드를 만들 수 있다.

then 메소드에 의해 실행되는 콜백함수는 resolve나 reject 메소드의 실행 이후에야 실행되도록 설계되어있어서 비동기 콜백이 끝날 때 resolve나 reject 메소드를 실행하면 then의 콜백함수를 실행시킬 수 있다.

promise 패턴의 적용으로 비동기를 포함하고 있는 코드의 가독성을 높여준다. (콜백지옥에서 해방)

[예시] 실행순서

let myFirstPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Success!");
  }, 1000);
});

myFirstPromise.then((successMessage) => {
  console.log("Yay! " + successMessage);
});

• promise 실행
• then 실행(콜백함수 promise에 등록)
• 비동기 완료시 resolve 메소드 실행
• 콜백함수 실행

Promise.all

순서에 상관없이 동시에 여러개의 데이터 요청/응답을 다 받은 후에, 콜백을 처리해야 하는 경우가 있을 수 있다. 아래 예제에서는 3가지 비동기의 처리가 완료된 이후에 then의 콜백함수가 실행 된다.

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout( () => resolve("foo"), 1000);
});

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});

// expected output: Array [3, 42, "foo"]

[예시] fetch 사용

getData(fn) {
    // 두 번의 fetch 요청이 끝나면, 무언가 한다.
    const todoInitialList = fetch('https://jsonplaceholder.typicode.com/todos')
    .then(response => response.json());

    const listTemplate = fetch('./templates/list.tpl')
    .then(response => response.text()); 

    Promise.all([todoInitialList, listTemplate])
    .then( values =>  {
        const [todoList, listTpl]  = values;
        fn(todoList, listTpl);
    })
}

Promise.allSettled

Promise.all 은 병렬로 처리되는 것을 기다렸다가 실행하고 중간에 에러가 발생하면 즉시 reject 반환한다.

alSettled는 중간에 에러가 발생해도 reject상태로 빠지지않고 모든 상태를 기다렸다가 결과를 알려준다.

Promise.race

먼저 실행된 것이 있으면 그것 먼저 결과를 처리할 수 있다.

Promise.any

먼저 처리된 상태 중 fulfilled 상태만 먼저 반환한다. 만약 fulfilled 상태가 없다면 ‘AggregateError’ 를 발생시킨다.