JS, promise

Promise 란 ?

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

promise의 간단한 정의다. 

지난번에 이어서 callback에 의한 비동기처리를 promise를 이용하여 단점을 보완하는 코드까지 보면서 이해해보자.

 

기초 개념

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

Pending(대기)

// Pending(대기)
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(실패)

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

// reject()의 결과 값 Error를 err에 받음
// 실패처리의 결과값을 catch()로 받을 수 있다.
getData().then().catch(function(err) {
  console.log(err); // Error: Request is failed
});

promise는 성공 또는 실패만 한다.

executor는 resolve나 reject 중 하나를 반시 호출해야 한다.

체이닝

// 모던자바스크립트 예제 (살짝 수정)
new Promise(function(resolve, reject) {

  setTimeout(() => reject('error'), 1000);

}).then(function(result) {

  console.log(result + ' : 잘 수행!');
  return result + 'one';

}).catch(function(result) {

  console.log(result + ' : 애러 발생!'); // 1
  return result + 'two';

}).then(function(result) {

  console.log(result + ' : 잘 수행!'); // 2
  return result + 'three';

});

 

실무에서의 예제와 프로미스의 에러 처리에 대한 자세한 내용들은

아래 출처의 글들을 계속해서 참고해야 할 듯 싶다.

 

실무에서는 실제 웹 서비스에 사용자 로그인 인증 로직에 프로미스를 연결하여 사용한다고 한다. (판교님 블로그)

 

역시 이해하고 글을 쓴다는게 어렵다.. 똑같이 쳐보고 옮기는 거라고 하더라도

async와 await는 따로 글을 써야할 거 같다.

 

 

 

출처 

: 캡틴 판교 - 자바스크립트 Promise 쉽게 이해하기

: 모던 JavaScript 튜토리얼