[JS] ES6 - Promise

이채현

💡 Javascript ES6 문법을 배워보자 - Promise

Promises

async

자바스크립트는 순차적으로 처리되는게 아니라 한꺼번에 실행된다. ⇒ 자바스크립트의 비동기성(async)

이벤트 루프에서 비동기적으로 실행시킨다.

Promise

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

내가 아직 모르는 값이랑 같이 일하게 해준다

금방 끝나진 않겠지만 곧 오면 이걸 가지고 작업할 게 표시 해주는 것

const promiseTest1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 3000, "Test Pass");
});

// setInterval(console.log, 1000, promiseTest1);
promiseTest1.then((value) => console.log(value));

const promiseTest1 = new Promise((resolve, reject) => {
  setTimeout(reject, 3000, "Test Fail");
});

// setInterval(console.log, 1000, promiseTest1);
promiseTest1
  .then((value) => console.log(value))
  .catch((error) => console.log(error));

Chaining Promise

.then().then()…. 할때 리턴 필요

const promiseTest2 = new Promise((resolve, reject) => {
  resolve(2);
});

promiseTest2
  .then((number) => {
    console.log(number * 2);
    return number * 2;
  })
  .then((otherNumber) => console.log(otherNumber * 2)); 

Propmise.all

Promise.all은 주어진 모든 Promise를 실행한 후 진행되는 하나의 Promise를 반환한다.

/**
 * Promise.all
 */
const p1 = new Promise((resolve) => {
  setTimeout(resolve, 5000, "first");
});

const p2 = new Promise((resolve) => {
  setTimeout(resolve, 1000, "second");
});

const p3 = new Promise((resolve) => {
  setTimeout(resolve, 3000, "third");
});

const motherPromise = Promise.all([p1, p2, p3]);

motherPromise
  .then((values) => console.log(values))
  .catch((err) => console.log(err));

// 모든 프로미스가 resolve 해야지 출력
// 5초후 마지막 first 끝나야 최종출력
// 중간에 reject 뜨면 바로 중단

Promise.race

기본적으로 promise all이랑 같지만 하나만 resolve 되거나 reject하면 된다. 가장 빨리 리턴 되는 걸로 결정, 부모프로미스를 차지하고 그 값 하나 리턴함

/**
 * Promise.race
 */
 const motherPromise2 = Promise.race([p1, p2, p3]);

 motherPromise2
   .then((values) => console.log(values))
   .catch((err) => console.log(err));

// second

finally

뭘하든 마지막에 실행된다. 보통 작업이 다 끝나고 로딩 끝낼 때 쓴다.

/**
 * Finally
 */
const p1 = new Promise((resolve) => {
  setTimeout(resolve, 3000, "first");
})
  .then((value) => console.log(value))
  .finally(() => console.log("I'm done"));