출처 : 유튜브 드림코딩 자바스크립트

Promise

Promise is a Javascript object for asynchronous operation.
비동기적인 것을 수행할 때 콜백함수 대신 유용하게 쓸 수 있는 object.

정해진 장시간의 기능을 수행하고 나서 정상적으로 기능이 수행되어졌다면 성공의 message와 함께 정해진 결과값을 전달해준다. 문제가 발생할 경우는 error을 전달해준다.

공부해야할 것
1. state 프로세스가 기능수행 중인지 성공했는지 실패했는지 등의 상태
2. producer 와 consumer의 차이. 우리가 원하는 데이터를 제공하는 사람과 데이터 쓰는 사람의 차이점 이해하기

State: pending -> fulfilled or rejected
Producer vs Consumer

1. Producer

when new Promise is created, the executer runs automaticallly.

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

reject() : 주로 error object를 통해서 값을 전달한다.

2. Consumers

then, catch, finally 등을 통해 값을 받아올 수 있다.

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

.then 다음 바로 .catch 나오는 것을 chaining 이라고 함. .then 은 결국 똑같은 promise를 return하기 때문에 그 promise에서 .catch 등록하는 것
finally : 성공, 실패 상관없이 무조건 마지막에 호출되어짐.

2초 뒤에 콘솔 창에 ellie라고 출력된다.
resolve라는 콜백함수를 통해서 전달한 값이 value의 parameter로 전달되어 값이 출력된다.
result 콜백함수를 실행시켰을 경우는 에러창이 뜬다. => catch 함수를 통해 에러 발생했을 때 어떻게 처리할 것인지 등록할 수 있음.
catch함수를 통해 더이상 에러창 뜨지 않고 Error : no network 라고 출력됌.

3. Promise chaining

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, result)=>{
        setTimeout(()=> resolve(num-1), 1000);
    })  
})
.then(num => console.log(num));

then 은 값을 바로 전달할 수도 있고, promise를 전달해도 됌

4.Error Handling

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


getHen() //
.then(getEgg)//.then(hen => getEgg(hen)) 콜백함수를 전달할 때 받아오는 벨류를 
             //다른 함수로 호출하는 경우 간단히 코드 작성가능. 자동적으로 getEgg라는 
             //함수에 전달해서 
.catch(error => {   
    return '🥖';
})
.then(cook)//.then(egg => cook(egg))
.then(console.log)//.then(meal => console.log(meal))
.catch(console.log)

🥖 을 return 함으로써 오류가 출력되지 않고 🥖 => 🍳 로 출력된다.
promise chain 이 실패하지 않음