[ES6] 비동기 처리를 위한 Promise (XMLHttpRequest)

기존의 AJAX의 비동기 처리 패턴은 가독성이 떨어지고 예외 처리가 곤란했다.

ES5의 기존의 비동기 처리 패턴

function request (param) {
    var xhr1 = new XMLHttpRequest();
 
    xhr1.open('GET', url1, true);
    xhr1.onreadystatechange = function() {
        if (xhr1.readyState === 4 && xhr1.status === 200) {
            var xhr2 = new XMLHttpRequest();
            xhr2.open('GET', url2, true);
            xhr2.onreadystatechange = function() {
                if (xhr2.readyState === 4 && xhr2.status === 200) {
                console.log("ok");
                    console.log(xhr2.responseText);
                } else {
                    console.log('request2 Error: ' + xhr2.status);
                }
            };
            xhr2.send(null);
        } else {
           console.log('request1 Error: ' + xhr1.status);
        }
    };
    xhr1.send(null);
}

위의 예제는 2번의 AJAX 호출이지만 실제로는 더 많은 경우도 많다. 또한 위의 2번의 AJAX에서 두번째는 첫번째가 성공한 경우에만 유효하다.

ES6의 Promise를 사용한 비동기 처리패턴

function request1(param) {
    return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest();
 
        xhr.open('GET', url1, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                resolve(xhr.responseText);
            } else {
                reject('request1 Error: ' + xhr.status);
            }
        };
        xhr.send(null);
    });
}

function request2(param) {
    return new Promise(function(resolve, reject) {
        var xhr = new XMLHttpRequest();
 
        xhr.open('GET', url2, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                resolve(xhr.responseText);
            } else {
                reject('request2 Error: ' + xhr.status);
            }
        };
        xhr.send(null);
    });
}
 
Promise.resolve()
    .then(request1)
    .catch(error => console.log(error))
    .then(request2)
    .catch(error => console.log(error))
    .then(result => {
        console.log('ok');
        console.log(result);
    });

비동기 메소드가 프로미스 객체를 반환하면서 체이닝이 가능한데, 첫번째 request1이 성공할 경우 그 다음에 request2가 호출된다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다