Promise

Juhwan Lee·2021년 11월 18일
0
post-thumbnail

Promise란?

  1. 비동기를 간편하게 처리할 수 있도록 도와주는 Object
  2. 정해진 장시간의 기능을 수행하고 나서, 정상적으로 기능이 수행됐다면 성공의 메세지와 함께 처리된 결과값을 전달해 준다.
  3. 기능을 수행하다가 문제가 발생하면 에러를 전달해준다.

Point!
1. State: process가 수행 중인지, 성공했는지, 실패했는지
2. producer와 Consumer의 차이점을 이해하자

1. Producer

// 새로운 promise가 만들어 질 때, executor 함수가 바로 실행된다.
const promise = new Promise((resolve, reject) => {
  // 무거운 일을 할때나 시간이 꽤 걸리는 작업을 할 때
  // 동기적으로 처리를 하면 다음 라인의 코드가 실행되지 않는다.
  // network, read files - 비동기 처리
  console.log('doing something...');
  setTimeout(() => {
    resolve('lee');
    // reject(new Error('no network'));
  }, 2000);
});

2. Promise 사용하기

promise
  // then은 promise가 정상적으로 잘 수행이 되었을 때,
  // resolve라는 콜백함수를 통해 전달한 값이 value로 간다.
  .then(value => {
    console.log(value);
  })
  // error가 발생했을 때, 어떻게 처리할 건지 콜백함수를 등록해 준다.
  .catch(error => {
    console.log(error);
  })
  // 성공과 실패에 무관하게, 출력하게 된다.
  .finally(() => {
    console.log('finally');
  });

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

4. 오류를 잘 처리 하자

const getHen = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve('🐓'), 1000);
  });
const getEgg = hen =>
  new Promise((resolve, reject) => {
    // setTimeout(() => resolve(`${hen} => 🥚`), 1000);
    setTimeout(() => reject(new Error(`error! ${hen} => 🥚`)), 1000);
  });
const cook = egg =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve(`${egg} => 🍳`), 1000);
  });

getHen() //
  // .then(hen => getEgg(hen))
  // 한 가지만 받아오는 경우엔 생략 가능하다.
  .then(getEgg)
  // getEgg에서 문제를 해결하고 싶으면, 바로 아래 catch 처리를 해주면 된다.
  .catch(error => {
    return `🥖`;
  })
  .then(cook)
  .then(console.log)
  .catch(console.log);




출처
'드림코딩'님의 프로미스 개념부터 활용까지

profile
keep going

0개의 댓글