JavaScript promise

promise란?

 

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

다음코드를 먼저 수행한는 특성입니다.

 

promise는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 일반적으로 웹 애플리케이션을 구현할 때,

서버에서 데이터를 요청하고 받아오기 위해 아래와 같은 API를 사용한다.

 

$.get('url 주소' , function(response) {

    // .....

});

위 API가 실행되면 서버에다가  '데이터 하나 보내주세요' 라는 요청을 보낸다.

그런데 여기서 데이터를 받아오기도 전에 , 마치 데이터를 다 받아온 것 마냥 화면에 데이터를 표시하려고 하면,

오류가 발생하거나 빈 화면이 뜹니다. 이와 같은 문제점을 해겨하기 위한 방법 중 하나가 프로미스다.

 

-기초-

 

->기본코드

function getData(callbackFunc) {

$.get('url 주소/products/1', function(response) {

callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌

});

}

getData(function(tableData) {

console.log(tableData); // $.get()의 response 값이 tableData에 전달됨

});

 

위 코드를 promise로 바꾸면 아래처럼 됩니다.

 

function getData(callback) {

// new Promise() 추가

return new Promise(function(resolve, reject) {

$.get('url 주소/products/1', function(response) {

// 데이터를 받으면 resolve() 호출

resolve(response);

});

});

}

// getData()의 실행이 끝나면 호출되는 then()

getData().then(function(tableData) {

// resolve()의 결과 값이 여기로 전달됨

console.log(tableData); // $.get()의 reponse 값이 tableData에 전달됨

});

 

-> Promise의 3가지 상태(states)

 

프로미스를 사용 할 때 알아야 하는 가장 기본적인 개념이 바로  상태입니다.

여기서 말하는 상태란 프로미스의 처리 과정을 의미한다.

new Promise()로 프로미스를 생성하고, 종료 될때까지 3가지 상태를 갖는다.

1) pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태

2) Fulifiled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

3) Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

 

Pending(대기)

먼저 아래와 같이 new Promise()를 호출하며 Pending 상태가 됩니다.

 

new Promise();

 

new Promise() 메서드를 호출 할 때, 콜백함수를 선언 할 수 있고, 콜백 함수의 인자는 resovle,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 =100;

resolve(data);

 

});

}

// resolve() 결과 값 Data를 resolveData로 받음

getData.then(function(resolbeData){

console.log(resolvedData); // 100

});

 

Rejected(실패)

 

new Promise()로 프로미스 객체를 생성하면 콜백 함수 인자로 resolve와 reject를 사용 할 수있다고 했습니다.

여기서 reject를 아래와 같이 호출하면 실해(Rejected) 상태가 된다.

 

function getData(){

return new Promise(function(resolve,reject){

reject(new Error("Request is Failed"));

});

}

getData().then().catch(function(err){

console.log(err); //Error: Request is Failed

});