JavaScript - XMLHttpRequest 로 return 값 받기 위해 promise 사용하기

XMLHttpRequest 의 onload() 를 통해 받은 값을 아래와 같이 return 하고 싶었다.

let getData = () => {       
        let xhr = new XMLHttpRequest;
        xhr.open('POST', url, true);

        // 통신이 완료되어 데이터를 다 받아온 경우, 실행된다
        xhr.onload = () => {
            // status 는 HTTP 통신의 결과를 의미하며, 200 은 통신이 성공했다는 의미
            if (xhr.status == 200) {
                let result = xhr.response;
                return result;
            } else {
                alert("ERROR LOADING FILE!" + this.status);
            }
        };
        xhr.send();
}

function showData = () => {
    let result = getData();
    console.log(result);
}

 

그러나, Ajax 요청은 비동기적이기 때문에, 내가 원하는 값을 return 하기 전에 코드가 종료되어
getData() 함수가 undefined 를 리턴하는 문제가 있었다.

이것의 해결방법에 대해 찾아보니, promise 라는 것을 사용해서 해결할 수 있다고 한다.

아래와 같이 수정하니, getData() 함수로부터 값을 반환받을 수 있었다.

Promise 에 대해 아직 제대로 공부하지 못해서 어떻게 동작하는지 더 찾아봐야할 것 같다.

let getData = () => {

    return new Promise((resolve, reject) => {
       
        let xhr = new XMLHttpRequest;

        xhr.open('POST', url, true);

        // 통신이 완료되어 데이터를 다 받아온 경우, 실행된다
        xhr.onload = () => {
            // status 는 HTTP 통신의 결과를 의미하며, 200 은 통신이 성공했다는 의미
            if (xhr.status == 200) {
                let result = xhr.response;
                result = JSON.parse(result); // JSON 타입으로 파싱해준다
                resolve(result); // Promise 로 결과값을 반환해준다
            } else {
                alert("ERROR LOADING FILE!" + this.status);
            }
        };
        xhr.send();
    });
}

function showData = () => {
    let result;
    getProjectList()
        .then( data => {
            result = data;
            console.log("결과 값" + result);
        })
}

 

 

참고 사이트 >>>

http://ccoenraets.github.io/es6-tutorial-data/promisify/