TIL - Promise, async & await

Promise

• 향후에 언젠가 사용하게 될 값을 생산해내는 객체이며, 비동기 동작이 완료된 이후 그 성공, 실패한 결과를 처리하기 위한 handler이다.
• 현재는 값이 존재하지 않으니까 가져오게 되면 어떻게 처리를 해준다는 일종의 약속이다.

async

• 전 명령의 수행이 끝나지 않아도 다음 명령을 실행한다는 의미

await

• Promise의 값이 사용가능할 때까지 내 method의 실행을 일시중지시킨다.

사용법

new Promise(function(resolve, reject) { ... } );

작업이 성공하면 resolve함수를 호출하여 resolve의 인자값을 then으로 받게 되고
작업에 실패하면 reject 함수를 호출하여 reject의 인자값을 catch로 받게 된다.
성공, 실패 어떤일이든 finally로 받아서 처리할 수도 있다.

new Promise(function (resolve, reject) {
}).then(function (resolve) {
    //resolve 값 처리
}).catch(function (reject) {
    //reject 값 처리
}).finally(function(){
    //항상 처리
});

왜 promise가 필요할까?

• 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜬다. 이와 같은 문제점을 해결하기 위한 방법 중 하나가 Promise!
• 콜백함수의 지옥에서 빠져나오게 해준다!

function addTenValue(x, callBack) {
    setTimeout(function () {
        return callBack(x + 10);
    }, 1000);
}

//이를 계속 더하고자 할때 promise를 사용하지 않으면 이렇게 된다. 가독성 떨어짐 ㅠ
addTenValue(10, function (x1) {
    addTenValue(x1, function (x2) {
        addTenValue(x2, function (x3) {
            console.log(x3);
        })
    })
}); 

하지만 Promise를 이용하면 쉽게 해결된다!

function addTenValue(x) {
    return (new Promise(function (resolve) {
        setTimeout(function () {
            resolve(x + 10);
        }, 1000)
    }));
}

addTenValue(10).then(function (result) {
    return addTenValue(result);
}).then(function (result) {
    return addTenValue(result);
}).then(function (result) {
    console.log(result);
});