JS | Promise ( Producer, Consumer)

Promise

promise는 javascript에 내장되어 있는 object로 asynchronous operation을 위해 사용된다. 비동기적은 것을 실행할 때 callback 함수 대신 유용하게 쓰일 수 있는 object이다.

Promise의 2가지 핵심포인트

1. state: process가 무거운 operaton을 수행하고 있는지 중인지 아니면 기능 수행이 완료되어 성공했는지 실패했는지 상태에 대해 이해하는 것이 중요하다.
   ① pending : promise가 만들어져서 지정한 operation이 수행 중일 때
   ② fullfilled : operaion을 성공적으로 모두 끝내었을 때
   ③ rejected: file을 찾을 수 없거나 network에 문제가 생겼을 때
2. producer와 consumer의 차이를 아는 것. 우리가 원하는 data를 producing 하는 사람과 제공된 data를 필요로 하는 사람의 차이점을 이해하는 것.
   promise에는 원하는 기능을 수행해서 해당하는 data를 만들어내는 producer 즉 promise object와 원하는 data를 소비하는 consumer로 나뉘어진다.

1. Producer

우리가 원하는 기능을 비동기적으로 실행하는 promise
promise는 class이기 때문에 new keyword를 이용하여 object를 생성할 수 있다.
promise의 생성자를 보면 executor 라는 callback를 전달해줘야 한다. 이 callback 함수에는 다른 2가지의 callback 함수를 받는다. 그 중 하나는 result 기능을 정상적으로 수행해서 마지막에 최종적으로 data를 전달하는 callback 함수
기능을 수행하다가 중간에 문제가 생기면 호출하게 될 reject로 나뉘어져 있다.

const promise = new Promise((resolve, reject) => {
    // doing some heavy work, 보통 promise 안에서 heavy한 작업들을 수행한다. 
    console.log('doing something...');
    setTimeout(() => {
        resolve('ellie');
    }, 2000);
});

network 에서 data를 받아오거나 file 에서 무언가 큰 data를 읽어오는 과정을 동기적으로 처리하게 되면 해당 코드가 실행되는 동안 다음 코드가 실행되지 않기 때문에 복잡하거나 큰 작업들은 promise를 사용하여 비동기적으로 처리하는 것이 좋다.

promise를 만드는 순간 우리가 전달한 callback 함수가 바로 실행된다. 만약 promise 안에 network 통신을 하는 코드를 작성했다면 promise가 만들어지는 순간 network 통신을 수행하게 된다.
만약 network 요청을 사용자가 요구했을 때만 해야하는 경우라면 위와 같이 코드를 작성하면 사용자가 요구하지도 않았는데 불필요한 network 통신이 일어날 수 있다.
** promise를 만드는 순간 그 안에 전달한 executor라는 callback 함수가 실행된다. **
When new Promise is created, the executor runs automatically.

2. Consumer

*then, catch, finally 를 이용하여 값을 받아올 수 있다. *

promise.then((value) => {
    console.log(value); 
})

여기서 value parameter는 promise 가 정상적으로 수행되어 마지막으로 resolve callback 함수에서 전달된 값을 가져온다.
then 은 promise가 정상적으로 수행되어서 최종적으로 resolve 라는 callback 함수를 통해 전달한 값이 value의 parameter 값이 전달되어 들어온다.

만약 reject를 쓴다면? 만약 network를 하다가 무언가를 실패했을 때
보통 error object에서는 어떤 error가 발생했는지 이유를 잘 작성해줘야 한다.

const promise = new Promise((resolve, reject) => {
    console.log('doing something...');
    setTimeout(() => {
        //resolve('ellie');
        reject(new Error('no network '));
    }, 2000);
});
// Uncaught error 가 발생한다.
// 이것은 promise.then 을 통해서 성공적인 case만 다뤘기 때문이다.
-----------------------------------------------------------
👇
promise
    .then((value) => {
        console.log(value); 
    })
    .catch(error => {
        console.log(error);
    });
    .finally(() => {console.log('finally');
    });

promise 에 then을 호출하게 되면 then은 결국 promise, 똑같은 promise를 return하기 때문에 그 return된 promise에 catch를 다시 호출 할 수 있다.
이를 chaining 이라고 한다.
finally 는 성공과 실패여부와 상관없이 무조건 마지막에 호출되어진다.

Callback Hell 실습해볼것

https://www.youtube.com/watch?v=JB_yU6Oe2eE&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=12