[JavaScript] 자바스크립트 Promise

🎯 Promise

• promise api는 비동기 api 중 하나이다.
• Task queue가 아닌 Job queue를 사용한다.
• Job queue는 Task queue보다 우선순위가 높다.
• Promise 처리가 setTimeout 처리보다 앞선다.
• 비동기 작업의 진행, 성공, 실패 상태를 표현한다.
  • Pending : 진행상태 표시
  • fulfilled : 성공
  • rejected 실패
• Promise.prototype.then 체인을 이용해 비동기 처리 순서를 강제할 수 있다.

setTimeout(() => {
  console.log("타임아웃 1");
}, 0);

Promise.resolve().then(() => console.log("프로미스1"));

setTimeout(() => {
  console.log("타임아웃 2");
}, 0);

Promise.resolve().then(() => console.log("프로미스2"));

// 프로미스1
// 프로미스2
// 타임아웃 1
// 타임아웃 2

• Promise 처리가 setTimeout 처리보다 앞선다.
• 성공의 경우 .then()
• 실패의 경우 .catch()

 

📝 Promise 생성자

let promise = new Promise((resolve, reject) => {
  if(Math.random() < 0.5) {
      return reject("실패")
  }
  resolve(10);
})

• new Promise(callback)
• callback 함수는 (resolve, reject) 두 인자를 받으며 성공 시에는 resolve를 호출, 실패 시에는 reject를 호출한다.

 

📝 Promise 메서드

promise
  .then(data => {
    console.log("성공 : ", data);
  })
  .catch(e => {
    console.log("실패 : ", e);
  })
  .finally(() => {
    console.log("promise 종료");
  })

• then() 메서드에 성공했을 때 실행할 콜백 함수를 인자로 넘긴다.
• catch() 메서드에 실패했을 때 실행할 콜백 함수를 인자로 넘긴다.
• finally() 메서드 성공/실패 여부와 상관없이 모두 실행할 콜백 함수를 인자로 넘긴다.
• then(callback1, callback2)로 callback1의 자리에 성공, callback2의 자리에 실패 메서드를 인자로 넘길 수 있다.

 

📝 Promise 메서드 체인

promise
  .then(data => {
    return fetchUser(data);
  })
  .then(user => {
    console.log("user : ", user);
  })
  .catch(e => {
    console.log("실패 : ", e);
  })

• then/catch 메서드가 또 다른 promise를 리턴하여 비동기 코드에 순서를 부여한다.
• 이렇게 동일한 객체에서 메서드를 연결할 수 있는 것을 체이닝(chaining)이라 한다.
• 함수를 호출한 주체가 함수를 끝낸 뒤 자기 자신을 리턴하도록 하여 구현한다.

 

📝 Promise.resolve, Promise.reject

Promise
  .resolve(10)
  .then(console.log("Test"))

Promise
  .reject('Error')
  .catch(console.log("Test"))

• Promise.resolve 함수는 성공한 Promise를 바로 반환한다.
• Promise.reject 함수는 실패한 Promise를 바로 반환한다.
• 인위적으로 Promise 메서드 체인을 만들 수 있다.
• 비동기 코드를 진행해야 하는 상황 등에 유용하게 사용할 수 있다.

 

📝 Promise.all

Promise.all([
  promise1,
  promise2,
  promise3,
])
  .then(values => {
    console.log("모두 성공 : ", values);
  })
  .catch(e => {
    console.log("하나라도 실패 : ", e);
  })

• 배열을 받아 모두 성공 시 각 Promise의 resolved 값을 배열로 반환한다.
• 하나의 Promise라도 실패할 시, 가장 먼저 실패한 Promise의 실패 이유를 반환한다.

 

🏷 요약

📕 Promise 생성 문법

var myPromise1 = new Promise(function(resolve, reject) {
  resolve(1);
});

 

📕 Promise 이행(resolve)과 거부(reject)

myPromise1.then();  //이행
var myPromise2 = new Promise(function(resolve, reject) {
  reject(1);
});
myPromise2.then();