[JavaScript] Promise

Promise?

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

 

프로미스는 왜 필요할까?

 왜냐하면 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용하는데, 일반적으로 웹 어플리케이션을 구현하 때 서버에서 데이터를 요청하고 받아오기 위한 api를 사용한다.

 api가 실행되면 데이터를 받아오기 위한 요청을 하는데 데이터를 받아오기도 전에 데이터를 받아온 것 처럼 화면에 데이터를 표시 하려한다면 오류가 발생한다. 이와같은 문제점을 해결하기 위해서 프로미스를 쓰는 것이다. 

 

Promise 의 상태

Pending(대기)

- 비동기 처리 로직이 아직 완료되지 않은 상태

new Promise();

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

 

Fullfilled(이행)

- 비동기 처리가 완료되어 프로미스 결과 값을 반환해준 상태

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

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(실패)

- 비동기 처리가 실패하거나 오류가 발생한 상태

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

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

 

코드 출처:

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

자바스크립트 Promise 쉽게 이해하기