Promise 란?

Promise 란 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 객체(object) 이다. 일반적인 콜백함수에 비해 흐름이 자연스럽고 유연한 코드를 작성할 수 있다.

📌 무거운 데이터나 작업을 할 때, 동기적으로 작업을 진행하게 되면 다음 코드가 실행되지 않는 문제가 생긴다.(홈페이지가 멈춰 사용자들이 이탈하는 경우가 생김!) 따라서 Promise와 같은 비동기 처리 방법을 이용해 비동기적으로 처리해줘야한다.

Promise는 정해진 장시간의 기능을 수행하고 나서, 정상적으로 기능이 수행되었다면 성공의 메세지와 함께 처리된 결과 값을 전달한다. 만약 기능이 수행되지 못했다면 error를 전달해준다.

Promise의 상태(state)

  1. Pending: Promise가 만들어져서 우리가 지정한 기능이 수행 중일 때 pending 상태이다.
  2. Fulfilled : 기능이 성공적으로 끝난다면, Fulfilled 상태가 된다.
  3. Rejected : 파일을 찾을 수가 없거나 네트워크에 문제가 생긴다면 Rejected 상태가 된다.

Producer

const promise = new Promise((resolve, reject)=> {  
  //doing some heavy work(network, read files)
})

Promise는 클래스이기 때문에 new라는 키워드를 이용해서 object를 생성할 수 있다.

Promise의 생성자를 보면 executor라는 콜백함수를 전달해줘야 한다. 이 executor 안에는 2가지 콜백함수가 있는데, 이는 바로 resolvereject이다.

const promise = new Promise((resolve, reject)=> {
  setTimeout(() => {
   resolve('june');
  }, 2000);
})
  • resolve : 기능을 정상적으로 수행해서, 마지막에 최종 데이터를 전달하는 콜백함수.
const promise = new Promise((resolve, reject)=> {
  setTimeout(() => {
   reject(new Error('No network'));
  }, 2000);
});

// Uncaught (in promise) Error : No network
  • reject : 기능을 수행하다가 중간에 문제가 생기면 호출하게 되는 콜백함수. reject는 보통 Error라는 객체를 통해서 값을 전달하는데, Error는 자바스크립트에서 제공한다.

❗️ 새로운 Promise가 만들어 질 때는, executor 함수가 바로 자동적으로 실행된다. 불필요한 Network 통신이 일어날 수 있기 때문에 이를 유의해서 코드를 짜야한다.


Consumers : then, catch, finally

promise
.then((value)=>{
  console.log(value)
}) // june
.catch((error)=>{
  console.log(error)
}) // Error : No network
.finally(()=>{
  console.log('finally');
}) // finally
  • then : 여기서 받아오는 value 파라미터에는 Promise가 정상적으로 잘 수행이 되어서 마지막으로 resolve 콜백함수에서 전달된 'june'이라는 값이 들어온다.

  • catch : Promise가 기능을 수행하다가 error가 발생한 경우에만 사용할 수 있다.

  • finally : 성공 실패 여부와 상관없이 무조건 호출된다. 따라서 성공 여부에 상관 없이 마지막으로 실행시키고 싶은 기능이 있을 때, finally를 사용하면 된다.

📌 Promisethen을 호출하게 되면 결국 똑같은 Promise를 리턴하기 때문에, 그 리턴된 Promisecatch를 호출할 수 있는 것! 이것을 체이닝 (Chaining)이라고 한다.


Promise chaining

const fetchNumber = new Promise((resolve, reject)=> {
  setTimeout(()=> resolve(1), 1000); 
});

fetchNumber
.then(num => num*2)
.then(num => num*3)
.then(num => {
  return new Promise((resolve, reject) =>{
    setTimeout(()=> resolve(num -1), 1000)
  });
})
.then(num => console.log(num))
// (2초 뒤) 5 

then 은 값을 전달할 수도, Promise 자체를 전달할 수도 있다!


에러 핸들링 : Error Handling

const getHen = () => {
  new Promise((resolve, reject)=> {
  setTimeout(()=> resolve('🐓'), 1000);
  });
}

const getEgg = (hen) => {
  new Promise((resolve, reject)=> {
  setTimeout(() => 
  reject(new Error(`error! ${hen} => 🥚`)), 1000);
  });
}

const cook = (egg) => {
  new Promise((resolve, reject)=> {
  setTimeout(()=> resolve(`${egg} => 🍳`), 1000);
  });
}

getHen
.then(hen => getEgg(hen))
.then(egg => cook(egg))
.then(meal => console.log(meal))
.catch(error => console.log(error));

//Error : error! 🐓 => 🥚 at promise




참고 자료 : 드림코딩 by 엘리 - Promise 강의

profile
무슨 생각을 해... 그냥 하는거지 ~(˘▾˘~)

0개의 댓글