[JavaScript] 고급 문법 Promise

Promise ?

약속, 자바스크립트에서 제공하는 비동기를 간편하게 처리할 수 있도록 도와주는 오브젝트이다.

 

State

Producer(정보제공) vs Consumer(결과를 사용)

 

promise의 상태 3가지

state :

1. (대기중)프로미스가 수행 중이면 pending 상태 ->

2. (이행됨)성공적으로 다 끝내게 되면 fulfilled 상태가 됨 ,

3. (거부됨)네트워크 문제가 생기면 rejected 상태가 됨

 

이행,거부됨 상태를 처리됨(settled) 상태라고 한다.

대기 중 상태일 때만 이행됨,거부됨 상태로 변할 수 있다.

 

 

1. Producer

2. Consumers : then, catch, finally

 

Promise의 장점

1. 코드 가독성 향상
2. 비동기 작업 처리 개선
3. 비동기 로직에서 더 나은 제어 흐름 정의
4. 더 나은 오류 처리

 

생성자로 Promise 객체 생성

const promise = new Promise((resolve, reject) => { //생성자
  // do something
  setTimeout(() => {		// 비동기를 표현하기 위해 setTimeout 함수를 사용 
  		resolve('sorydory');
  }, 2000);
});

 

new 키워드로 프로미스를 생성한다.

생성된 프로미스는 대기중 상태가 된다.

1. 콜백 함수는 resolve와 reject 두개의 매개변수를 받는다.
2. 콜백 함수의 기능을 수행하고 결과가 성공이면 resolve를 호출한다.
3. 원했던 기능이 잘 작동하지 않았다면 reject를 호출한다.

new 키워드를 사용하지 않고 Promise.reject를 호출하면 거부됨 상태 프로미스가 생성된다.

Promise.resolve를 호출해도 프로미스가 생성된다.

---

1. then ()

then()은 resolved나 reject 상태일 때 호출될 수 있다.

또한 Promise에서 데이터를 가져와 성공적으로 실행하도록 정의할 수도 있다.

then()은 매개변수로 두개의 함수를 받는다.

첫 번째 함수는 Promise가 resolved 상태이고 결과를 받았을 때 실행될 함수이고,

두 번째는 rejected 상태이거나 에러가 발생했을 때 실행될 함수이다. 

두 번째 매개변수는 뒤에 설명할 .catch() 라는 더 좋은 방법이 있기 때문에 생략 가능하다.

then 메서드는 항상 프로미스를 반환한다.따라서 하나의 프로미스로부터 연속적으로 then 메서드를 호출할 수 있다.

requestData().then(resolve, onReject); // (1)
Promise.resolve(123).then(data => console.log(data)); // 123
Promise.reject('err').then(null, error => console.log(error)); // 에러 발생

 

2. catch ()

catch()는 rejected 상태이거나 어떤 에러가 발생했을 때 예외를 처리하는 메서드이다. 

주로 에러 핸들링 용도로 사용된다. 

매개변수로는 에러가 발생했을 때 실행할 한 개의 함수를 받는다.

예외 처리는 then 메서드의 onReject 함수보다는 catch 메서드를 이용하는 것이 가독성 면에서 더 좋다.

then과 마찬가지로 catch도 새로운 프로미스를 반환한다.

catch 메서드 이후에도 계속해서 then 메서드를 사용할 수 있다.

Promise.reject(1).then(null, error => {
    console.log(error);
});
Promise.reject(1).catch(error => {
    console.log(error);
});

 

 

3. finally

finally는 프로미스가 이행됨 또는 거부됨 상태일 때 호출되는 메서드이다.

finally 메서드는 아래와 같이 프로미스 체인의 가장 마지막에 사용된다.

 

function requestData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1);
        }, 2000);
    });
}

requestData()
    .then(data => {
        console.log(data); // 1
        return data + 10;
    })
    .then(data => {
        console.log(data); // 11
        return data + 100;
    })
    .then(data => {
        console.log(data); // 111
    })
    .catch(error => {
        console.log(error);
    })
    .finally(() => {
        console.log('finally');
    });

 

결과 :

1

11

111

finally 

 

finally 메서드는 .then(onFinally, onFinally) 코드와 유사하지만, 이전에 사용된 프로미스를 그대로 반환한다는 점이 다르다. 따라서 처리됨 상태인 프로미스의 데이터를 건드리지 않고 추가 작업을 할 때 유용하게 사용될 수 있다.

 

 

정리

Promise는 이벤트의 비동기 처리가 필요할 때 사용되고, 비동기 http 요청을 처리할 때도 사용할 수 있습니다.