[JavaScript] Promise { <pending> } 문제 해결 (2) - Promise

출처 : https://velog.io/@beberiche/promise-asyncawait

 

 지난 글에서는 Promise 관련 문제에 어떻게 직면하게 되었는지, 그리고 Promise를 알기 위한 개념인 비동기 처리와 콜백 함수에 대해 살펴봤습니다. 비동기 처리와 콜백 함수에 대해 처음 접하여 간략하게 알고 싶으신 분은 해당 링크(https://dslyh01.tistory.com/26)를 참고해주시면 되겠습니다. 이번 글에서는 Promise에 대해 좀 더 상세하게 살펴보고자 합니다.

 지난 글에서 Promise 관련해서는 'Javascript의 비동기 처리에 사용되는 객체'를 의미한다 정도까지 설명하였습니다. Javascript에서는 비동기 처리 방식의 이슈를 해결하기 위해 콜백 함수를 사용하였지만, 이 방식은 콜백 지옥에 쉽게 빠질 수 있다는 또 다른 문제점을 가집니다. 이러한 콜백 함수의 단점을 보완하고 비동기 처리에서 손쉽게 사용할 수 있는 객체가 바로 Promise입니다.

 

 Promise는 3가지의 상태를 가집니다.

 

• Pending(대기) : 비동기 처리가 미완료인 상태
• Fulfilled(이행) : 비동기 처리가 성공적으로 완료되어 결과값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패한 상태

 Promise의 기본적인 코드 틀은 아래의 코드와 같습니다. 새로운 Promise가 생성되면 우선 Pending(대기) 상태이며, resolve와 reject, 두 개의 콜백 함수를 받게 됩니다. resolve는 성공했을 때 실행되고 fulfilled(이행) 상태가 되며, reject는 실패했을 때 실행되고 rejected(실패) 상태가 됩니다. 아래의 예시는 특정 url에 요청을 보내고 올바른 응답이 오면 response 값을 반환하고, 실패하면 error를 반환하는 Promise를 보여줍니다. fulfilled 상태는 then()을 이용하여 처리 결과를 받고, rejected 상태는 catch()를 이용하여 처리 결과를 받습니다. 

 

function getData() {
  return new Promise(function(resolve, reject) {
    $.get('url', 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 출력
});

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

 

 Promise의 처리 흐름은 다음과 같습니다. 후속 처리 method인 then과 catch 모두 기본적으로 Promise를 반환합니다.

 

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

 

 이전 글에서 함수 내에서 계속 콜백 함수를 사용하는 콜백 지옥(Callback hell)에 대해 설명드렸습니다. Promise의 경우에는 Promise Chaining을 통해 코드를 간결하게 작성하고 유지 보수성도 높일 수 있습니다. Promise Chaining의 예시는 다음과 같습니다. 3초 이후에 1을 반환하는 tmp라는 Promise를 생성하였습니다. 이후 후속 처리 method인 then()을 통해 계속해서 숫자를 더하고 출력하는 함수를 추가할 수 있습니다.

 

const tmp = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(1);
  }, 3 * 100);
});

tmp.then((response) => {
  console.log(response);
  return response + 1;
}).then((response) => {
  console.log(response);
  return response + 2;
}).then((response) => {
  console.log(response);
  return response + 3;
}).then(console.log);

/*
1
2
4
7
*/

 

 이번 글에서는 비동기 처리와 콜백 함수에 이어 Promise에 대해 살펴봤습니다. Promise는 all, race, allSettled와 같은 정적 method 등 추가적인 정보가 존재하니, 더 자세하게 알고 싶으신 분들은 아래 참고의 글 및 다양한 자료들을 살펴보시는 것을 추천드립니다. 다음 글에서는 비동기 처리 문법 중 가장 최근에 나온 async & await에 대해 작성할 예정입니다. 틀린 부분은 댓글로 알려주시면 감사하겠습니다.

 

[이전 글]

1) [JavaScript] Promise { <pending> } 문제 해결 (1) - 비동기 처리 및 콜백 함수

 

[다음 글]

1) [JavaScript] Promise { <pending> } 문제 해결 (3) - async & await

 

<참고>

 

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

자바스크립트 Promise 쉽게 이해하기

https://sangminem.tistory.com/284

자바스크립트 Promise 예제를 통해 쉽게 이해하기

https://yoo11052.tistory.com/155

[JavaScript] 프로미스(Promise)란