[JavaScript] Promise

리선맨·2023년 10월 23일

비동기 처리

목록 보기

3/5

Promise

Promise는 ES6에서 도입된 비동기 작업을 조금 더 수월하게 처리 할 수 있게 해주는 기능이다.

이전에는 비동기 작업을 처리 할 때 콜백 함수로 처리를 했었는데 처리할 비동기 작업이 많아지면 [JavaScript] ajax, setTimeout & 콜백 함수 편에서 알아본 콜백 지옥이 만들어져 코드의 유지보수성 및 가독성을 해치는 일이 발생한다. 이를 방지하기 위해 Promise를 학습해보도록 하자.

00. 프로미스 처리 흐름

출처 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

01. 프로미스 생성

executor

let promise = new Promise(function(resolve, reject) {
  // executor()
});

executor는 프로미스가 만들어질 때 자동으로 전달되어 실행되는데 여기서 원하는 일이 처리가 된다. 처리가 끝나면 executor의 인수 resolve와 reject중 상황에 맞는 콜백을 선택하여 호출해야한다.

resolve(value) — 일이 성공적으로 끝난 경우 그 결과를 나타내는 value와 함께 호출
reject(error) — 에러 발생 시 에러 객체를 나타내는 error와 함께 호출

states

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

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

Pending(대기)
new Promise();
프로미스를 호출하면 대기 상태가 된다.

Fulfilled(완료)
new Promise(function(resolve, reject) {
  resolve();
});
resolve를 즉시 호출해보면 프로미스는 Fulfilled(완료)상태가 된다.

Rejected(실패)
new Promise(function(resolve, reject) {
  reject();
});
reject를 즉시 호출해보면 프로미스는 Rejected(실패)상태가 된다.

02. 프로미스 사용

프로미스 객체의 state와 result 프로퍼티는 내부 프로퍼티로 직접 접근할 수는 없고,
후속처리함수인 .then, .catch 메서드를 사용해 접근할 수 있다.

.then

promise.then(
  result => alert(result), // resolve일 때 실행
  error => alert(error) // reject일 때 실행
);

.then의 첫번째 인수는 프라미스가 이행되었을 때 실행되는 함수이고, 여기서 실행 결과를 받는다.
.then의 두번째 인수는 프라미스가 거부되었을 때 실행되는 함수이고, 여기서 에러를 받는다.

✔ 두번째 인수는 생략하여 이행된 경우만을 다룰 수 있다.
✔ 첫번째 인수에 null을 전달하여 .then(null, f) 형태로 실패된 경우만을 다룰 수 있다.

.catch

// .catch(f)는 promise.then(null, f)과 동일하게 작동합니다
promise.catch(f); // Error 출력

실패한 이유(실패 처리의 결과 값)를 catch()로 받을 수 있습니다.

✔ .then 설명에서 알아본거 처럼 .then(f, f) 또는 .then(null, f)을 활용하여 에러를 처리할 수 있겠지만 catch()를 사용하는게 더 효율적이다.

03. 프로미스 사용 예제

위에서 알아본 내용들을 종합해서 사용해보자.

ajax 통신 예제 코드에 프로미스를 적용한 코드이다.

function getJsonData() {
  return new Promise(function(resolve, reject) {
    $.get('https://jsonplaceholder.typicode.com/todos', function(response) {
      if (response) {
        resolve(response);
      }
      reject(new Error("서버와 소통이 안된다!!!!"));
    });
  });
}

getJsonData()
  .then(function(result) {
  	console.log(result); // response 값 출력
  })
  .catch(function(err) {
  	console.error(err); // Error 출력
  });

프로미스 체이닝

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

getJsonData()
  .then(function(result) {
	// ...
  })
  .then(function(result) {
	// ...
  })
  .then(function(result) {
	// ...
  })
  .catch(function(err) {
  	// ...
  });