자바스크립트 Promise 이해해보자!

Promise란?

---

프로미스는 자바스크립트 비동기 처리에 사용되는 객체이다.

자바스크립트 비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 말한다. 

 

Promise는 만드는 순간 콜백함수가 바로 실행된다는 점을 기억하자. 

 

 

Promise는 왜 필요할까?

---

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 

일반적으로 웹 애플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용한다. 

$.get('url 주소/products/1', function(response) {
  // ...
});

위 API가 실행되면 서버에 데이터를 보내달라는 요청을 하게 되는데, 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜨게된다. 

 

이와 같은 문제점을 해결하기 위한 방법 중 하나가 프로미스이다. 

 

 

728x90

Promise를 사용하는 간단한 예제

---

function getData(callback) {
  // new Promise() 호출
  return new Promise((resolve, reject) => {
    $.get('url주소', (response) => {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}

// getData()의 실행이 끝나면 호출되는 then()
// response 값이 data에 전달된다. 
getData().then((data) => console.log(data));

 

 

반응형

프로미스의 3가지 상태(states)

---

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

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

 

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

 

Pending(대기)

new Promise() 메서드를 호출하면 대기 상태가 된다.

이 때 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject다. 

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

 

Fulfilled(이행)

콜백 함수의 인자 resolve를 실행하면 이행 상태가 된다. 

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

 

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

 

Rejected(실패)

reject를 호출하면 실패 상태가 된다. 

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

 

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

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


getData().then().catch((err) => {
  console.log(err); // Error: Request is failed
});

프로미스 처리 흐름 - 출처:MDN

 

 

 

Promise의 에러 처리 방법 2️⃣

---

1. .then()의 두 번째 인자 사용하기

getData().then(
  handleSuccess,
  handleError
);

 

2. .catch() 사용하기

getData().then().catch();

 

 

참고 자료

---

• https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

 

 

 

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖