Promise의 사용

 

Promise란?

 

Promise는 비동기 함수가 반환하는 객체이다. 함수의 성공(resolve) 또는 실패(reject) 상태를 알려준다. 콜백 함수를 직접 호출하는 방법 대신, Promise로 콜백함수를 호출할 수 있다. 이러한 특징 때문에 Promise를 사용하게 된다면 비동기 처리 시점, 비동기 함수의 결과를 쉽게 확인할 수 있고, 에러도 어디서 발생했는지 발견하기 쉽다.

 

Promise는 세 개의 상태를 가진다.

• 대기(Pending): 비동기 함수가 아직 시작하지 않은 상태
• 성공(Fulfilled): 비동기 함수가 성공적으로 완료된 상태
• 실패(Rejected): 비동기 함수가 실패한 상태

Promise가 대기상태에서 상태가 바뀌면 then(),catch() 함수를 사용해서 성공,실패의 Promise를 각각 처리가 가능하다.

 

 

Promise의 장점

 

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

 

Promise는 객체이기 때문에 생성자 함수로 인스턴스화가 가능하다.

프로미스 체이닝

비동기 함수의 결과를 가지고 비동기 함수를 호출해야 하는 경우, 함수의 호출이 중첩되어 콜백 지옥이 발생할 수 있다.

프로미스는 후속 처리 메소드를 체이닝하여 프로미스를 반환하는 여러개의 비동기 함수들을 연결하여 사용할 수 있다.

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(10);
    }, 3 * 100);
});

p.then((result) => {
    console.log(result); // 10
    return result * 2;
}).then((result) => {
    console.log(result); // 20
    return result * 3;
}).then((result) => {
    console.log(result); // 60
    return result * 4;
});


/*결과
10
20
60
*/

 

 

 

하지만 Promise에 대해 then() 메서드를 반복적으로 여러 번 호출한다고 Promise Chaining이 될 수 없다.

아래 코드를 확인해보자

p.then((result) => {
    console.log(result); // 10
    return result * 2;
})

p.then((result) => {
    console.log(result); // 10
    return result * 3;
})

p.then((result) => {
    console.log(result); // 10
    return result * 4;
});

/*결과
10
10
10
*/

 

아래 코드처럼 하게된다면 result에 담긴 10이 return result*4를 통해 40이 된다고 해도 다음 then()함수와는 관련이 없기 때문에

각각 계산이 되고 console.log에는 초기값 10만 찍히게 된다.