[자바스크립트] 12. 프로미스

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리입니다. 

자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다.

---

프로미스(Promise)

자바스크립트에서 비동기를 간편하게 처리해주는 오브젝트입니다.

- 자바스크립트에서 콜백함수 대신에 비동기적으로 사용할 때, 유용하게 쓸수 있는 오브젝트입니다.

---

- state

프로세스가 기능을 수행하고 있는 중인지, 기능 수행이 성공했는지, 실패했는지를 이해하는 것이 중요함

 

- Producer Vs Consumer

필요한 데이터를 제공하는 것과 제공된 데이터를 쓰는 것에 대해서 차이점을 잘 이해해야 합니다.

---

1. Promise 만들기

새로운 Promise를 만들었을 때, executor 이 자동적으로 실행됩니다.

 

- Promise

const promise = new Promise((resolve, reject) => {
  // doing some heavy work (network, read files)
  console.log('doing something...');
  setTimeout(() => {
    resolve('ellie');
    // reject(new Error('no network'));
  }, 2000);
});

- Promise는 resolve와 reject로 나눠져 있습니다.

- resolve는 진행을 정상적으로 진행해서 마지막에 전달하는 것

- reject는 기능을 수행하다가 문제가 발생하면 실행하는 것

- 시간이 조금 걸리는 무거운 작업의 경우 많이 사용합니다.

(네트워크 통신이나 파일 입출력 같은 경우) 

 

- Consumers

promise 
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log('finally');
  });

- Producer에서 정상적으로 전달하면, then의 value로 들어오게 됩니다.

- 리턴된 Promise에 catch를 등록해 줍니다. 실패를 하면 콘솔에 error를 찍게 됩니다.

- finally를 통해서 과정이 모두 끝났음을 알 수 있습니다.

 

---

2. Promise 연결하기

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));

- fetchNumber라는 Promise를 만들어 주고 then을 통해서 받습니다.

- then 과정에서 다시 한번 Promise를 통해서 전달을 해줍니다.

- 여기서 주의 할점은 값을 바로 전달해도 되고, 또 다른 비동기인 프로미스를 전달해도 됩니다.

---

3. 오류 처리하기

const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('chichen'), 1000);
  });
const getEgg = (hen) =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${hen} => egg`), 1000);
  });
const cook = (egg) =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => egg food`), 1000);
  });

getHen() //
  .then(getEgg)
  .then(cook)
  .then(console.log)
  .catch(console.log);

 

- 중간에 에러가 발생하는 경우

const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('chichen'), 1000);
  });
const getEgg = (hen) =>
  new Promise((resolve, reject) => {
    setTimeout(() => reject(new Error(`${hen} => egg`)), 1000);
  });
const cook = (egg) =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => egg food`), 1000);
  });

getHen() //
  .then(getEgg)
  .catch((error) => {
    return 'bread';
  })
  .then(cook)
  .then(console.log)
  .catch(console.log);