Promise

Promise

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

프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다.

일반적으로 웹 어플리케이션을 구현할 때 서버에서 데이터를 요청하고 받아오기 위해 사용

​

Promise를 사용하지 않고 일반 ajax 코드

function getData(callbackFunc){

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

        callbackFunc(response);

    })

}

​

getData(function(tableData){

    console.log(tableData);

});

 

위 내용을 Promise 로 사용

function getData(callback){

    return new Promise(function(resolve, reject){

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

            resolve(response);

        });

    })

}

​

getData().then(function(tableData){

    console.log(tableData);

})

​

Promise 3가지 상태(states)

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

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

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

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

​

1. Pending(대기)

- 아래와 같이 new Promise() 메서드를 호출하면 대기(Pending) 상태가 된다.

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

 

​

2. Fulfilled(이행 또는 완료)

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

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

 

이행상태가 되면 아래와 같이 함수.then(받을변수명) 을 이용하여 처리 결과값을 받을수 있다.

function getData(){

    return new Promise(function(resolve, reject){

        var data = 100;

        resolve(100)

    })

}

​

getData().then(function(resolvedData){

    console.log(resolvedData); //100

})

 

3. Rejected(실패)

new Promise() 로 프로미스 객체를 생성하면 resolve 또는 reject를 받을수 있다고 했다.

이행시킬때는 resolve(), 실패는 reject()를 호출하면 실패 상태가 된다.

​

function getData(){

    return new Promise(function(resolve, reject){

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

    })

}

​

getData().then(function(data){

​

}).catch(function(err){

console.log(err);

})

​

​

​

 

​

* 자바스크립트 비동기 처리

특정 코드의 연산이 끝날때까지 코드의 실행을 멈추지않고 다음 코드를 실행하는 자바스크립트 특성

특정 작업이 실행 완료될 때까지 기다리지 않고 다음작업을 수행하는 자바스크립트 특성

​

ex)

function getData() {

    var tableData;

    $.get('https://domain.com/products/1', function(response) {

        tableData = response;

    });

    return tableData;

}

console.log(getData()); // undefined

위 undefined인 이유는 $.get ajax 요청을 통해 응답데이터를 기다려주지않고 다음 코드가 실행됐기 때문이다.