[Javascript] Promise 이해하기

Promise (프로미스)

싱글 스레드인 자바스크립트에서 비동기 처리를 위해서 콜백(callback)을 사용해왔다.

덕분에 비동기 처리를 온전히 해낼 수 있었지만 이런 콜백이 반복되면서 콜백 지옥이 생겨났다.

콜백 지옥으로 인해 복잡도가 증가하고 예외처리가 어려워졌다.

이러한 단점을 보완하기 위하여 생긴 것이 Promise이다.

Promise를 간단히 소개하자면 비동기에서 성공(fulfilled)과 실패(rejected)를 분리해서 메서드를 수행해주는 것이다.

fulfilled 혹은 rejected될 때, 프로미스에 연결한 처리기는 그 프로미스의 then 메서드에 의해 대기열에 오른다.

1. Promise 생성 방법

var promise1 = function(bool){
    return new Promise(function(resolve, reject){
        setTimeout( function(){
            if(bool){
                resolve("fulfilled 상태입니다. then으로 연결됩니다.");
            }
            else{
                reject("rejected 상태입니다. catch로 연결됩니다.");
            }
        }, 1000)
    })
}

promise1(true)
.then( function(result){
    console.log(result);
})
.catch( function(err){
    console.log(err)
})

Promise를 생성하는 방법은 위와 같다.

promise1이라는 새로운 함수를 만들어 그 안에 return 값으로 새로운 Promise를 생성한다.

Promise에 들어가는 callback함수의 파라미터는 resolve와 reject가 있다.

resolve는 fulfilled되었을 때 반환하는 것이고 reject는 말 그대로 rejected 되었을 때 반환하는 것이다.

그렇기 때문에 안에서 bool값이 true일 경우 resolve를 return하고 else인 경우(bool=false) reject를 반환한다.

스트링으로 나와있듯이 resolve를 보내면 아래의 promise1을 호출하였을 때 then부분으로 넘어가고 reject를 보내면 catch로 넘어가서 쉽게 처리할 수 있다.

Promise 생성자의 prototype에는 then(), catch() 메서드가 존재한다.

아래에서 Promise의 프로토타입에 대해 알아보자.

 

2.Promise의 상태

Pending : Promise를 수행중인 상태를 나타낸다.

fulfilled : Promise가 resolve된 상태이다.

rejected : promise가 지켜지지 못한 상태이다.

settled : fulfilled 혹은 rejeted로 결론이 난 상태이다.

 

3. Promise 프로토타입

Promise의 prototype 메서드는 아래와 같다.

- Promise.prototype.catch()

프로미스(promise)에서 오류가 났을 때 거부를 처리해준다.

asyncThing1()
    .then(function() { return asyncThing2();})
    .then(function() { return asyncThing3();})
    .catch(function(err) { return asyncRecovery1();})
 
    .then(function() { return asyncThing4();}, function(err) { return asyncRecovery2(); })
    .catch(function(err) { console.log("Don't worry about it");})
 
    .then(function() { console.log("All done!");});

 

그림 출처 : http://programmingsummaries.tistory.com/325

 

- Promise.prototype.then()

Promise가 정상적으로 비동기 작업을 완료하였을 때(fulfilled) 호출된다.

then의 파라미터로는 성공 시 호출할 함수를 넣어준다.

 

- Promise.prototype.finally()

finally() 메소드는 Promise 객체를 반환한다. 

Promise가 처리되면 충족되거나 거부되는지 여부에 관계없이 지정된 콜백 함수가 실행된다. 

finally는 Promise가 성공적으로 수행되었는지 거절되었는지에 관계없이 Promise가 처리된 후에 코드가 무조건 한 번은 실행되는 것을 제공한다.