[Javascript] Promise 란?

Promise : 비동기 처리 방식으로 실행된 결과의 성공과 실패를 관리한는 객체

 

Promise는 비동기 작업을 여러 개 수행할 때 더욱 진가가 나타난다.

그 이유는 비동기 작업이 순서대로 수행되어야 할 때가 많기 때문이다.

 

장점

- 콜백 지옥의 문제점 해결 : 비동기 처리를 순서대로 처리할 때 콜백함수처럼 중첩할 필요가 없다. 즉, 소스를 간결하고 직관적으로 작성할 수 있다.

- 비동기 처리를 완료한 후 반환값 관리가 쉬움 : 비동기 처리를 종료한 후 반환값을 성공과 실패 모두 then()과 catch()에 전달된 함수를 통해 관리할 수 있다.

 

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


// 2. Consumers : then, catch, finally
promise.then(value => {
    console.log(value);
})
.catch(error => {
    console.log(error);
});

 

 

예제2

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, reject) => {
            setTimeout(() => resolve(num -1), 1000);
        });
    })
    .then(num => console.log(num)); // 결과는 5가 출력된다.

 

예제3

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


### 출력
닭 -> 달걀 -> 프라이드

결과

 

 

참고

joshua1988.github.io/web-development/javascript/promise-for-beginners/

자바스크립트 Promise 쉽게 이해하기