Rest API 비동기 시점 제어 (async, await) 및 value return

오늘은 블로그 비교적 최근에 추가된 비동기 패턴제어인 async과 await에 대해서 정리하려고 한다.

들어가기 앞서 async와 await은 최신 브라우저에서만 지원하기 떄문에 이점은 고려해서 사용해야 할 것 같다.

(익스플로러를 크로스브라우징 대상에 포함한다면 어쩔수없이 콜백함수를 써야하지만..)

 

먼저 나는 async과 await을 사용한 상황은 금액에 대한 계산이 필요했는데, 금액을 가져오는 API가 여러 개였기 떄문에 정확한 금액 계산을 위해 데이터들이 한번에 들어 와야하는 상황이였다. 

따라서 전통적인 콜백함수를 사용하기보단 async&await을 써보았다. (사내에서 개발하는 프로그램은 크롬, 엣지만 지원하고 있다.)

 

먼저 나는 document문서에서 설명해주는 것과 매우 흡사하게 작성했고, async 함수 안에 비지니스 로직을 추가하고, return 값으로 결과값을 돌려주도록 작성했다.

function getData(params) {
    return axios.get('/api/sales', {
        params: {
            start : '2020-05-05',
            end : '2020-05-05',
            page : 1,
        }
    })
}
 
async function promiseGetData(params) { 
    let result = await getData(params);
    // 비지니스로직
    return result; // 계산된 결과를 리턴.
}
 
 
// main 
(function() {
    let calc = promiseGetData(params); // 계산된 값을 calc이라는 변수에 담고싶다.
})();
 

그런데 위와 같이 사용하다보니 한 가지 문제가 발생했는데, promiseGetData라는 함수를 메인해서 호출한다음 리턴받게되면 리턴 값을 promise로 들어오게되고, 비동기 시점도 맞지 않는 것 이였다. 

문제해결을 위해 열심히 검색해본 결과, async함수 내에서 return 값을 받으려면 다음과 같이 사용해야 한다는 것이였다

(function() {
    promiseGetData(params).then(res => {
        let cacl = res
    }); // 이렇게 사용해야 값이 정상적으로 리턴된다
        // 위 코드는 아래와 같은 의미다. (Arrow Function이 익숙지않은 경우 사용)
    promiseGetData(params).then(function(res) {   
        let cacl = res
    });
    console.log('123412341234'); // 이코드는 promiseGetData함수가 실행되는 도중에 실행된다.
})();
 

+ 추가로 주의할 점은 promiseGetData를 호출하는 function 밖에 다른 비지니스로직이 있다면, 안전하게 promiseGetData function 안으로 옮기는 것이 좋다.  (promiseGetData 함수안의 코드들은 데이터를 다 가져온 뒤 실행되지만 밖에 있는 코드들은 그냥 순서대로 실행되기 때문)

 

async와 await을 처음사용해봐서 너무 두서없이 정리한 것 같지만 누군가 도움이 되었으면 좋겠다는 생각 + 내가 사용했던 것을 잊지 않기위해 정리해본다.