웹에서 비동기 처리의 시점 컨트롤(callback, promise, setTimeout)

 

비동기 방식을 이용해 데이터를 가져오는 부분을 개발하던 도중 데이터를 가져오는 시점이 명확하지 않아 문제가 발생했다, 데이터를 정상적으로 가져온 뒤 함수가 실행되어야 하는데 그렇지 않아서 발생한 문제였다, 따라서 문제를 해결하기 위해 여러가지로 찾아보았는데 해결방법으로 여러가지가 있었는데 그 정보들을 정리해보고자 한다.

 

1. callback함수를 이용하여 해결.

function requestData(callback) {
    var url = 'test/get/data';
    axios.get(url, function () {
    }).then((response) => {
        return response;
    });
}
 
requestData(function() {
    console.log('success!');
});

가장 전통적으로 사용하는 방법으로, 나도 이 글을 작성하기 전까진 콜백을 이용하여 비동기처리를 제어하는 방식을 이용했었다, 하지만 콜백을 이용하는 방식을 사용하게 되면 코드의 가독성이 떨어지고 복잡도가 증가한다.

그래서 다음으로 고민한 방법은 다음과 같았다.

 

2. setTimeout을 이용하는 방법

 

function requestData() {
    var url = 'test/get/data';
    axios.get(url, function () {
    }).then((response) => {
        setTimeout(function() {
            console.log('Success!');
        }, 1000);
    });
}

setTimeout을 이용해 1초간의 딜레이를 준 뒤 다음 라인이 실행되게 작성해서 사용해보았는데, 이 방법을 이용했을 때 생기는 문제는 가져올 데이터가 많아질 경우 설정해야 할 시간이 명확하지 않다고 판단했기 떄문에 다음 방법을 알아보았다. 참고 : 딜레이 (1000 -> 1초 10000 -> 10초)

 

3. Promise를 이용한 방법

function requestData() {
    return new Promise(function(resolve) {
        axios.get('test/api/get', function () {
        }).then((response) => {
            resolve(response);
        });
    });
}
 
requestData().then(function(response){
    console.log(response);
});
 

es5에서 추가된 promise라는 기능을 이용하여 구현해 보았는데, promise의 상태에는 resolve, reject 결과를 받을 수 있고 reject을 이용해 예외처리를 할 수 있는 것 같다. promise의 값에 접근하기 위해서는 .then(function(res) {  } 형식으로 접근해야 값을 얻을 수 있는 것 같다.. 그래서 알아보게 된건 async & await을 이용하는 방법인데 이 방법은 아직 정리가 되지 않아 추후에 정리해보고자 한다.

다양한 브라우저를 지원하기 위해서는 promise보다는 콜백을 이용해야 하겠지만, 토이프로젝트를 진행한다면 promise나 async & await을 이용하는게 좋을 것 같다.

 

Rereference : https://developer.mozilla.org/ko/docs/Web/API/WindowTimers/setTimeout

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Promise

Promise