JavaScript promise

< promise >

• 자바스크립트는 비동기 처리를 위해 콜백 함수를 사용하지만, 콜백을 남용하게 되면 콜백 지옥에 빠질 수 있다.
• 에러 처리도 힘들 뿐더러 여러 개의 비동기 처리를 한 번에 하는 데 한계가 있다.
• 이러한 콜백 함수의 단점을 보완하며 자바스크립트 비동기 처리에 사용되는 객체가 프로미스(promise)이다.

 

> promise의 장점

• 비동기 처리 시점을 명확하게 표현할 수 있다.
• 연속된 비동기 처리 작업을 수정, 삭제, 추가하기 편하고 유연하다.
• 비동기 작업 상태를 쉽게 확인할 수 있다.
• 코드의 유지보수성이 증가한다.

 

const promise = new Promise((resolve, reject) => {
    // 비동기 작업 수행
    console.log('doing something);
});

 

 

 

 

 

< Promise의 3가지 상태(states) >

프로미스를 사용할 때 알아야 하는 가장 기본적인 개념이 바로 프로미스의 상태(states)다.

여기서 말하는 상태란 프로미스의 처리 과정을 의미한다.

new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖는다.

• Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과값을 반환해준 상태
• Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태

 

> Pending(대기)

먼저 아래와 같이 new Promise() 메소드를 호출하면 대기(Pending) 상태가 된다.

new Promise();

 

 

new Promise() 메소드를 호출할 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject이다.

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

 

 

> Fulfilled(이행)

여기서 콜백 함수 인자 resolve를 아래와 같이 실행하면 이행(Fulfilled) 상태가 된다.

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

 

 

그리고 이행 상태가 되면 아래와 같이 then()을 이용하여 처리 결과 값을 받을 수 있다.

function getData() {
    return new Promise(function(resolve, reject) {
        let data = 100;
        resolve(data);
    });
}

// resolve()의 결과값 data를 resolvedData로 받음
getData().then(function(resolvedData) {
    console.log(resolvedData); // 100
});

 

 

> Rejected(실패)

new Promise()로 프로미스 객체를 생성하면 콜백 함수 인자로 resolve와 reject를 사용할 수 있다.

여기서 reject를 아래와 같이 호출하면 실패(Rejected) 상태가 된다.

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

 

 

그리고 실패 상태가 되면 실패한 이유(실패 처리의 결과값)를 catch()로 받을 수 있다.

function getData() {
    return new Promise(function(resolve, reject) {
        reject(new Error("Request is failed"));
    });
}

// reject()의 결과값 Error를 err에 받음
getData().then().catch(function(err) {
    console.log(err); // Error: Request is failed
});