[JavaScript] Promise

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가지 콜백함수가 있는데, 이는 바로 resolve와 reject이다.

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를 사용하면 된다.

📌 Promise에 then을 호출하게 되면 결국 똑같은 Promise를 리턴하기 때문에, 그 리턴된 Promise에 catch를 호출할 수 있는 것! 이것을 체이닝 (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 강의