Promise 로 XmlHttpRequest 래핑하기

function sendAjaxRequest(url,method,data) {
    return new Promise(function(resolve, reject){
        let xhr = new XMLHttpRequest();
        xhr.onload = function() {
            if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                resolve(xhr.response);
            } else {
                reject({status : xhr.status, statusText : xhr.statusText});
            }
        }
        xhr.open(method,url,true);
        xhr.responseType = 'json';
        xhr.send(data);
    });
}

function getSomeDataByXHR(url,method,data) {
    sendAjaxRequest(url,method,data).then((response)=>{
        console.log(response);
        //	필요한 작업은 여기에
    }).catch((errorMsg)=>{
        console.log(errorMsg);
    });
}

//	open api 사용
getSomeDataByXHR('https://api.tvmaze.com/shows/38963','GET');

 

비동기식으로 어떤 데이터를 획득해오는 작업을 진행중이었는데,

 

xhr.onload( ) 와 xhr.onreadystatechange( ) <-- 이 2개의 event handler 가 의도치 않게 작동해 원인파악에 시간이 들어갔다..;;

 

결론적으로는

• onreadystatechange 이벤트 핸들러는 계속 존재하지만, Promise 객체에 의해 한번 reject 된 이후로는 이벤트핸들러가 유효하지 않았다는 점
• onload 이벤트 핸들링을 통해 원하는 데이터가 성공적으로 주어지는 것을 기다리는 것이 좋아보임

위와 같은 방식은 사실 일련의 프로세스를 위한 chaining 과정에서 사용되기에 바람직하고,

 

사실 일회성 요청에 그쳐야한다면 굳이 Promise 를 거쳐갈 필요가 없다.