[드림코딩] 콜백함수 (2) : 콜백지옥 탈출, Promise (State, Producing)

Promise

Promise는 javascript에 내장되어있는 object로, 이를 통해서 비동기 코드를 깔끔하게 작성할 수 있다.

• 네트워크통신을 한다던지, 파일을 읽어온다던지 하는 등의 무거운 작업을 할 때는 오래 걸리므로 Promise로 처리한다. 무거운 작업을 처리하므로 사용자가 요청하지 않았는데도 일어나는 불필요한 네트워크통신(promise함수의 실행)을 방지해야 한다.
• new Promise가 만들어지는 순간, 해당 executor 함수가 자동으로 실행되므로 주의하자.

promise는 아래 두 가지를 염두에 두면 좋다.

---

1. State(상태)

process가 무거운 operation을 수행하고 있는지/완료되었다면 성공했는지/실패했는지의 상태

• pending : operation을 수행 중인 상태
• fulfilled : operation을 성공적으로 수행한 상태
• rejected : 파일을 찾을 수 없거나, 네트워크에 문제가 생긴 등 실패한 상태

---

2. Producing

Producer(데이터를 제공하는 사람)와 Consumer(데이터를 소비 하는 사람)의 차이

Producer

- resolve

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

- reject

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

Consumer

- then

// 정상적으로 수행이 된다면
promise.then((value) => { //value는 위의 promise함수에서 resolve된 data
  console.log(value);
})

//"Noran"

- catch 추가

// 정상적으로 수행이 된다면
promise
  .then(value => { //value는 위의 promise함수에서 resolve된 data
  console.log(value);
}) //then은 똑같은 promise를 return한다.
// reject되어 error가 일어난다면
  .catch(error => { //error를 uncaught가 아닌 원하는 방식으로 뜰 수 있게
  console.log(error);
});

//Error: no network

- finally 추가

// 정상적으로 수행이 된다면
promise
  .then(value => { //value는 위의 promise함수에서 resolve된 data
  console.log(value);
}) //then은 똑같은 promise를 return한다.
// error가 뜬다면
  .catch(error => { //error를 uncaught가 아닌 원하는 방식으로 뜰 수 있게
  console.log(error);
})
// 결과가 어떻든 마지막에 실행된다
.finally(() => {
  console.log('어쨌든 실행됨');
});

//Error: no network
//'어쩄든 실행됨'

---

출처 : 드림코딩 https://www.youtube.com/@dream-coding / MDN https://developer.mozilla.org/ko/