JS | 비동기 처리 Promise

BOZZANG·2022년 5월 10일
0

JavaScript

목록 보기
12/14
post-thumbnail

🙊 무서운 콜백 지옥

Promise 는 JS에서 비동기 처리를 위해 광범위하게 사용되는 것이다.
ES6에서 이것이 도입되기 전까지는 주로 콜백 함수를 다른 함수의 인자로 넘겨서 비동기 처리를 했었다. 이 방식은 단순한 코드를 작성할 때에는 문제가 생기지 않았지만, 콜백 함수를 중첩해서 연쇄적으로 호출해야 하는 복잡한 코드의 경우, 코드의 가독성이 현저히 떨어지게 된다. 이것을 소위 개발자들 사이에서 콜백 지옥이라고 불렸다고 한다.

그래서 이 문제를 해결하기 위해 나온 것 중 하나가 Promise 이다.

🎇 Promise

Promise 는 JS 비동기 처리에 사용되는 객체이다.
여기서 JS의 비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 JS의 특성을 말한다.

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

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

위 API가 실행되면 서버에 데이터를 보내달라는 요청을 하는데, 여기서 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 처럼 화면에 표시하려고 하면 오류가 발생하거나 빈 화면이 뜬다. 이와 같은 문제점을 해결하기 위한 방법 중 하나가 Promise 이다.


🔗 Promise 생성

Promise 객체는 new 키워드와 생성자를 통해서 생성할 수 있다.

이 생성자는 함수를 인자로 받고, 이 함수 인자는 resolvereject 라는 2개의 함수형 파라메터를 갖는다.

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

resolve(), reject() 함수에는 정상 처리, 예외 발생 여부에 따라 적절히 호출해주어야 한다.

일반적으로 resolve() 함수의 인자로는 미래 시점에 얻게될 결과를 넘겨주고,
reject() 함수의 인자로는 미래 시점에 발생할 예외
를 넘겨준다.


🔗 Promise States

여기서 states란 상태로, 프로미스의 처리 과정을 의미한다.
new Promise() 로 프로미스를 생성하고, 이것이 종료될 때 까지 3가지의 상태를 갖는다.

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

✔ Pending 대기

new Promise(); 

위와 같이 new Promise() 메서드를 호출하면 대기 상태가 된다.
이 메서드를 호출할 때 콜백 함수를 선언할 수 있고,
콜백 함수의 인자는 resolve, reject 이다.

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

✔ Fulfilled 이행

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

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

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

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

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

✔ Rejected 실패

Promise 객체 생성 후 콜백 함수 인자 중 reject 를 호출하면 실패 상태가 된다.

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
});

정상적인 인자를 넘긴 경우 then() 메서드가 호출되고,
비정상적인 인자를 넘긴 경우 catch() 메서드가 호출된다.
또한 Promise 객체로부터 얻게 될 미래 시점의 결과값이나 예외값을 접근하기 위해 then(), catch() 메서드가 사용되기도 한다.


🔗 ajax 통신 예제 코드에 Promise 적용해보기

function getData() {
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      if (response) {
        resolve(response);
      }
      reject(new Error("Request is failed"));
    });
  });
}

// 위 $.get() 호출 결과에 따라 'response' 또는 'Error' 출력
getData().then(function(data) {
  console.log(data); // response 값 출력
}).catch(function(err) {
  console.error(err); // Error 출력
});

서버에서 제대로 응답을 받으면 resolve() 메서드를 호출하고,
응답이 없으면 reject() 를 호출하는 예제이다.
호출된 메서드에 따라서 then() , catch() 로 분기하여 응답 결과 또는 오류를 출력한다.


CAPTAIN PANGYO
DaleSeo

0개의 댓글