Promise?? 뭔데??

진짜 삽질하는 짱구입니다 :) 재형·2022년 3월 21일

1. Promise??

promise는 기본적으로 함수에 콜백을 전달하는 대신에, 콜백을 첨부하는 방식의 객체다.

Javascript 비동기 처리에 사용되는 객체이다. 여기서 비동기 처리는 앞에서 콜백 함수를 공부하면서 보게 됐었는데 다시 복습하자면, 특정코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 Javascript의 특성이다.

2. 필요한 이유

주로 서버에서 받아온 데이터를 화면에 표시할 때 사용 한다. 일반적으로 웹 애플리케이션을 구현할 때 서버에서 테이터를 요청하고 받아오기 위해 아래와 같은 API를 사용한다고 한다.
$.get('url 주소/products/1', function(response) {
  // ...
});
위 API가 실행되면 서버에다가 '데이터 하나 보내주세요'라는 요청을 보낸다. 그런데 여기서 데이터를 받아오기도 전에 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면 오류가 발생하거나 빈 화면이 뜬다. 이와 같은 문제를 해결하기 위한 방법 중 하나가 프로미스!!
위 코드와 글의 출처

3. Promise코드 - 기초

프로미스가 어떻게 동작하는지 이해하기 위해서 예제 코드를 가져왔다. 코드는 ajax 통신 코드이다.
function getData(callbackFunc) {
  $.get('url 주소/products/1', function(response) {
    callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
  });
}
getData(function(tableData) {
  console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});
위 코드는 제이쿼리의 ajax통신 API를 이용하여 지정된 url에서 1번 상품 데이터를 받아오는 코드이다. 비동기 처리를 위해 콜백 함수를 사용한 예이다.

function getData(callback) {
  // new Promise() 추가
  return new Promise(function(resolve, reject) {
    $.get('url 주소/products/1', function(response) {
      // 데이터를 받으면 resolve() 호출
      resolve(response);
    });
  });
}
// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
  // resolve()의 결과 값이 여기로 전달됨
  console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨
});

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

출처

4. Promise 여러 개 연결하기(Chaining)

promise의 다른 특징은 여러 겨의 promise를 연결하여 사용할 수 있다는 점이다. 위 예제에서 then()메서드를 호출하고 나면 새로운 프로미스 객체가 반환 된다.
function getData() {
  return new Promise({
    // ...
  });
}
// then() 으로 여러 개의 프로미스를 연결한 형식
getData()
  .then(function(data) {
    // ...
  })
  .then(function() {
    // ...
  })
  .then(function() {
    // ...
  });
이런식으로 사용할 수 있다고 한다. 밑에 예제는 비동기 처리 예제에서 가장 흔하게 사용되는 setTimeout() API의 예제이다.

new Promise(function(resolve, reject){
  setTimeout(function() {
    resolve(1);
  }, 2000);
})
.then(function(result) {
  console.log(result); // 1
  return result + 10;
})
.then(function(result) {
  console.log(result); // 11
  return result + 20;
})
.then(function(result) {
  console.log(result); // 31
});

위 예제는 promise 객체를 하나 생성하고 setTimeout()을 이용해 2초 후에 resolve()를 호출하는 예제이다.

resolve()가 호출되면 프로미스가 대기 상태에서 이행 상태로 넘어가기 때문에 첫 번째, .then()의 로직으로 넘어간다. 첫 번째 .then()에서는 이행된 결과 값 1을 받아서 10을 더한 후 그다음 .then() 으로 넘겨 준다. 두 번째 .then()에서도 마찬가지로 바로 이전 프로미스의 결과 값 11을 받아서 20을 더하고 다음 .then()으로 넘겨준다. 이 과정의 반복 후에 최종으로 결과 값 31을 출력 한다.
출처

5. Promise의 에러 처리 방법

실제 서비스를 구현하다 보면 네트워크 연결, 서버 문제 등으로 인해 오류가 발생할 수 있다. 따라서, 프로미스의 에러 처리 방법도 알아야 한다고 한다...

방법은 2가지가 있다.
1 . .then()의 두 번째 인자로 에러를 처리하는 방법
2 . catch()를 이용하는 방법

function getData() {
 return new Promise(function(resolve, reject) {
   reject('failed');
 });
}

// 1. then()의 두 번째 인자로 에러를 처리하는 코드
getData().then(function() {
 // ...
}, function(err) {
 console.log(err);
});

// 2. catch()로 에러를 처리하는 코드
getData().then().catch(function(err) {
 console.log(err);
});