[ JavaScript 총정리 11 ] Promise

yricog·2022년 3월 25일

JavaScript_Basic

목록 보기

27/28

Promise

Promise는 JavaScript에서 제공하는 비동기를 간편하게 할 수 있도록 도와주는 오브젝트이다. 정상적인 기능이 수행되었다면 성공 메세지와 함께 처리된 결과값을 전달해주고, 문제가 생겼다면 에러를 전달해준다.
🙋‍♀️ "언제 user의 데이터를 받아올지 모르겠지만, promise 라는 오브젝트를 가지고 있으면 user의 데이터가 준비되는대로 너의 콜백함수를 내가 불러줄게!" 라고 약속하는 것 :)

📌 Study Guide

Status 이해하기

pending : 수행중

fulfilled : 완료

rejected : 에러

Producer(제공자)와 Consumer(사용자)의 차이 이해하기

Producer vs Consumers

Producer

새로운 Promise가 만들어질 때는 내가 전달한 executor(집행자) 함수가 자동적으로 실행된다.

executor = resolve, reject

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

Consumers

then, catch, finally 를 통해 값을 받아온다.

<script>
    promise
        .then((value) => {        //'yura'값이 value에 들어온다. 
            console.log(value);   // 2초뒤에 'yura' 출력
        })
        .catch(error => {
            console.log(error);
        })                        // Error: no network 가 콘솔에 출력 
        .finally(() => {console.log('finally')
        });                       //성공여부와 관계없이 마지막에 무조건 호출
</script>

Promise chaining

then을 이용하여 여러 Promise들을 chaining할 수 있다.
then은 값을 바로 전달하기도 하고, 비동기 promise를 전달하기도 한다.

<script>
    const fetchNumber = new Promise((resolve, reject) => {
        setTimeout(() => resolve(1),1000);
    });

    fetchNumber
    .then(num => num * 2) // 1 * 2 = 2
    .then(num => num * 3) // 2 * 3 = 6
    .then(num => {  // 6 - 1 = 5
        return new Promise((resolve, reject) => {
            setTimeout(() => resolve(num -1), 1000);
        });
    })
    .then(num => console.log(num)); // 2초뒤, 5출력
</script>

Error Handling

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

    getHen()
    .then(hen => getEgg(hen))
    .then(egg => cook(egg))
    .then(meal => console.log(meal)); // 🐓 => 🥚 => 🍳 출력 ! 
</script>

-> 이렇게 생략하여 간단한 표현이 가능하다.

<script>
    getHen()
        .then(getEgg)
        .catch(error => {
            return '🥖'; 
            // 계란을 받아오는 것이 실패하더라도, 빵으로 대체하여 출력하라!   
        })
        .then(cook)
        .then(console.log)
        .catch(console.log); // Error시 출력 
</script>