promise 공부

jungsw586·2019년 11월 24일
0

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
});
profile
Show me the code

0개의 댓글