promise 공부

1. promise란 무엇인가?

프로미스는 자바스크립트의 비동기 처리에 사용되는 객체다. 자바스크립트의 비동기 처리란 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 의미 한다.

2. promise는 왜 필요할까?

프로미스는 주로 서버에서 받아온 데이터를 화면에 렌더링하는 상황에서 사용된다. 서버에서 데이터를 요청하는 함수를 실행하게될때, 데이터가 다 받아온것 처럼 렌더링을 시도하면, 에러나 의도하지않은 화면이 렌더링이 될 수 있다. 이러한 문제점을 해결하기 위한 방법 중 하나가 프로미스이다.

3. promise의 3가지 상태(States)

프로미스를 사용할 때 알아야 하는 가장 기본적인 개념은 바로 프로미스 상태(states)이다. 여기서 말하는 상태란 프로미스의 처리 과정들을 의미한다. 프로미스는 생성되고 종료될 때까지 다음의 3가지 상태를 갖는다.

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

Pending(대기)

먼저 new Promise(); 메서드를 호출하면 Pending(대기) 상태가 된다.

이때, 콜백 함수의 인자로 resolve, reject에 접근할 수 있다..

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

Fulfilled(이행)

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

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

이행 상태가 되면 then()을 활용하여 처리결과값을 받을 수 있다.

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

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

Rejected(실패)

콜백 함수의 인자 reject로 reject();메서드를 실행하면 Rejected(실패) 상태가 된다.

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