[JavaScript] Promise 프로미스, 이거라도 제대로 알자

🔎 콜백 함수 학습 후 콜백 지옥을 해결하기 위해 필요한 promise를 학습하다가 선명하게 머리에 남지 않아 굵직하게 정리해보고자 한다.

✔️ promise

promise는 자바스크립트 안에 내장되어있는 오브젝트로 비동기적인 것을 수행할 때 콜백 함수 대신에 유용하게 사용할 수 있다

✔️ promise 포인트

2가지 포인트 잡고 공부하기

1. state(상태) : pending -> fulfilled or rejected
(오퍼레이션을 수행 중인지 -> 수행이 완료되어 성공 혹은 실패했는지, 프로그램 등에 문제가 있는지 이런 상태에 대한 이해)
2. Producer(제공자)와 Consumer(소비자)의 차이 이해하기

✔️ Promise 만들기(Producer)

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

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

📍 여기서 주의 📍
promise가 생성되는 순간, 그 안에 전달한 콜백 함수가 바로 실행되기 때문에 이점 유의가 필요하다.

(만약 사용자가 버튼을 누를 경우에만 실행되어야한다면 사용 부적합 →불필요한 네트워크 통신)

✔️✔️ Promise 사용하기(Consumer)

then, catch, finally를 사용해서 값을 받아올 수 있다

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

→ 이 때 value는 jigu

finally는 성공 실패 여부와 상관없이 마지막에 한번더 호출하고 싶을 때 사용한다.

✔️✔️✔️ Promise 연결하기(chaining)

const fetchNumber = new Promise((resolve, reject) => {
setTimeout(() => resolve(1), 1000);
});
fetchNumber
.then(num => num * 2)
.then(num => num * 2)
.then(num => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(num - 1), 1000);
});
})
.then(num => console.log(num));

→ 위 코드의 출력값은 2초에 걸려서 5가 실행된다.

📍 여기서 헷갈리는 부분 📍
then은 값을 바로 전달 할 수도 있고, 비동기인 promise를 전달해도 된다

✔️✔️✔️✔️ Promise 오류 잘 처리하기(handling)

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

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

📍 여기서 하나 알아가기 📍
.then(hen=> getEgg(hen))는 받아오는 변수를 다음 함수로 바로 호출하는 경우에는 간단하게 .then(getEgg) 이렇게 작성이 가능하다.

.then(getEgg)에서 생긴 오류를 처리하고 싶을 때는 바로 다음에 .catch를 작성해서 오류를 해결할 수 있다

• resolve로 넘긴 전달인자는 then으로 받아서 사용할 수 있습니다.
• reject로 넘긴 전달인자는 catch로 받아서 사용할 수 있습니다.