Javascript의 비동기 처리에 사용되는 Promise 객체

Javascript 는 '비동기 처리' 라는 특성을 가지고 있다.

 

* 비동기 처리란?

    - 특정 코드가 실행 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 특성

    - 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것

 

개발을 하다보면 데이터를 받아 화면에 표출하는 작업에서 위와 같은 특성 때문에 에러가 발생하곤 한다.

예를 들면 데이터를 완전히 가져오기도 전에 화면에서 데이터를 사용하려고 하면 에러가 발생한다.

 

'Promise' 가 바로 위와 같은 '비동기 처리' 에 사용되는 객체이다.

 

ajax 통신으로 데이터를 성공적으로 가져올 경우 resolve 메소드를 호출하여 데이터를 넣는다.

데이터를 가져오지 못했을 경우 reject 메소드에 오류 메시지 등을 넣는다.

 

Promise 객체의 then 함수는 성공적으로 데이터를 가져온 경우 resolve 메소드에 전달된 데이터를 사용할 수 있고

catch 함수는 reject 메소드에 전달된 오류 메시지 등을 사용할 수 있다.

 

const getList = function() {
    return new Promise(function(resolve, reject) {
        $.get(url, function(list) {
            resolve(list);
            reject('Error Occured');
        })
    })
}

getList().then(function(list) {    // 성공적으로 데이터를 가져온 경우 실행된다.

 

    if (list != undefined) {

        list.forEach(function(data, index) {
            let html =  '<tr>';
            html += ' <td>' + data.NUMBER + '</td>;
            html += ' <td>' + data.TITLE + '</td>;
            html += '</tr>';

            document.querySelector('table tbody').insertadjacenthtml('before', html);
        });

    }
    
}).catch(function(error) {    // 데이터를 가져오지 못한 경우 실행된다.
    console.error(error);
})