Javascript 비동기 처리 / Promise

Javascript 의 비동기란?

 

JS에서 비동기 처리라고 하면 기본적으로 프로그램 코드가 차례로 실행되다가 특정 연산(특정 메서드 등)을 실행했을 때 이 연산이 끝나는걸 기다리지 않고 다음 코드를 먼저 실행해버리는 자바스크립트의 특성.

 

Promise가 무엇일까?

(캡틴 팡요? 판교? 님의 블로그를 참고했읍니다)

 

프로미스는 자바스크립트의 비동기 처리에 사용되는 객체이다. 조금 더 정확히 말하자면 Promise 객체 안에서 임의의 코드를 작성하면, Promise 객체에서는 해당 객체 안에 있는 코드가 끝날때까지 기다리는 능력이 있다.

 

비동기 때문에 잘 안되는 예를 들어 보자.

 

function getData(){
    var data;
    get('aaa.com/search', function(response){
    	data = response;
    });
    return data;
}

 

위의 코드에서  data는 올바르게 데이터를 받아오지 못한다. get함수가 callback 함수를 부르기 전에 return 되어 버리기 때문이다.

 

이것을 해결하기 위해서는 어떻게 할 수 있을까?

 

function getData() {
    return new Promise(function(resolve,reject) {
        get('url',function(response){
            resolve(response);
        });
    }
}

getData().then(function(tableData){
    console.log(tableData);
});

위와 같이 해결 할 수 있다.

 

쉽게 설명하자면 getData는 Promise 객체를 리턴한다. 이때 promise 객체는 객체 안의 resolve 함수가 실행되기 전까지는 객체 밖(?)에서 호출한 .then() 메서드를 실행하지 않는다. 그렇기에 원하는 때 까지 다른 비동기 함수의 리턴을 기다릴 수 있다.

 

프로미스의 3가지 state들

 

프로미스는 3가지 상태로 나뉜다.

Pending : 아직 리턴을 기다리고 있는 상태

Fulfilled : 비동기 처리가 완료되어 프로미스가 결과 값을 반환한 상태(resolve함수 실행 후를 의미)

Rejected : 비동기 처리가 실패하여 오류를 띄운 상태

 

우리가 아무것도 하지 않고 Promise 객체를 생성만 하면 이 상태를 pending이라고 한다.

이때, 콜백 함수를 통해 resolve함수를 실행해주면 그때가 Fulfilled 상태가 된다.

여기까지는 위에서 본 예시에 있는 내용이다.

그런데 이때 오류를 발생했다는 것을 표시하기 위해서 resolve 함수 대신에 reject함수를 실행한다면 try - catch 문과 비슷하게 오류를 잡아낼 수 있게 된다.

 

function getData() {
    return new Promise(function (resolve, reject) {
        reject(new Error("Fail"));
    }
}

getData().then().catch(function(err){
    console.log(err);
});

 

요로케!

 

그리고 프로미스를 실행하고 나면 새로운 프로미스 객체가 나오기 때문에 여러번의 프로미스를 연결하여 사용하기가 편리하다.

 

function getData() {
    return new Promise({
        // 블라블라
    });
}


getData()
.then(function(data){
    // 블라블라
})
.then(function(data){
    // 블라블라
})
.then()

 

또한 아래와 같이 프로미스를 이어서 사용할 수도 있다.

 

getData(userInfo)
.then(parseValue)
.then(auth)
.then(display)

 

+ async / wait 관련하여도 읽어보면 재미있는데

https://joshua1988.github.io/web-development/javascript/js-async-await/

자바스크립트 async와 await

고고