Promise

📌 Promise 객체란?

 

React에서 비동기 처리에 활용되는 객체로
주로 웹 서비스를 구현할 때 원활한 데이터 통신을 위해 활용된다.

 

웹 페이지에서 서버로 데이터를 요청했을 때, 데이터를 모두 받기 전에 웹에 출력하려고 하는 경우를 방지하기 위해 활용된다.

 

Promise는 비동기 작업으로 인한 성공 또는 실패와 그 결과 값을 나타낸다. 여기서 결과 값은 최종 결과가 아닌 미래의 어떤 시점에 결과를 제공하겠다는 약속(프로미스)을 반환한다.

 

비동기 로직을 마치 동기 로직처럼 사용할 수 있는 기능을 가졌다.

 

비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있다.

 

📌 상태

 

 

• Pending(대기) : 비동기 로직 처리의 미완료 상태
• Fulfilled(이행) : 비동기 로직 처리가 완료된 상태로 Promise 결과값 반환 상태
• Rejected(실패) : 비동기 로직 처리의 실패 또는 오류 상태

 

new Promise();
new Promise((resolve, reject) => {});

 

Promise 객체를 생성하면 대기(pending) 상태가 된다. 인자는 resolve(실행)과 reject(실패)를 가진다.

 

function app() {
    return new Promise((resolve, reject) => {
        let data = 10;
        resolve(data);
    })
}

app().then((result) => console.log(result));

 

resolve에 파라미터를 넣어주면 Promise가 이행 상태로 넘어간다. 이후 then()을 활용하면 결과 값을 받을 수 있다.

 

function app() {
    return new Promise((resolve, reject) => {
        resolve(new Error("Rejected"));
    })
}

app().catch((error) => console.log(error));

 

reject 인자는 호출 시 실패 상태가 된다. 이후 catch()를 활용하면 결과값을 받고 예외를 확인할 수 있다.

 

References:

 

https://narup.tistory.com/215

[React] Promise란?

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise - JavaScript | MDN