axios Intercept requests_API 요청 처리 동안 UI 요소 보여 주기

기존 코드

$searchInput.addEventListener('keyup', async function(event) {
    $loadingIndicator.style.visibility = 'visible'; //loading UI 웹 상에 랜더링
    await searchKeyword(event.target.value, searchKeywordApi, showKeyword);
})

const searchKeywordApi = (data) => {
    let res = fetch(`${API_URL}?q=${data}`).then(data => {
        return data.json();
    })
    return res;
}

const searchKeyword = async (data, callApi, callback) => {
    try {
        let res = await callApi(data); //요청 처리 후 결과 리턴될 때까지 기다림(지연)
        $loadingIndicator.style.visibility = 'hidden'; //loading UI 웹 상에서 보이지 않게 처리
        
        (...)
        
    } catch(error) {
        console.log(error);
    }
}

---

Input 요소에서 keyup 이벤트가 발생하면 API 요청 처리 동안 사용자에게 처리 중이라는 사실을 시각적으로 보여주기 위해 다음과 같이

loading 관련 UI를 보여주도록 코드를 작성하였다.

 

The await expression causes async function execution to pause until a Promise is settled (that is, fulfilled or rejected), and to resume execution of the async function after fulfillment. When resumed, the value of the await expression is that of the fulfilled Promise.

 

하지만 이렇게 동기 처리로 수행될 코드 연산과 비동기 처리 이후에 처리될 코드 연산을 분립시켜보니 동작의 명확성과 독립성이 다소 떨어진다는 생각이 들어 다른 방법을 생각해 보았다.

 

axios Intercept requests

https://github.com/axios/axios#interceptors

 

GitHub - axios/axios: Promise based HTTP client for the browser and node.js

---

You can intercept requests or responses before they are handled by then or catch.

axios 인터셉터는 요청하기 직전, 응답을 받고 then, catch로 처리 직전에 가로챌 수 있다.

이를 이용하여 loading 관련 기능을 다음과 같이 리팩토링 해보았다.

axios.interceptors.request.use(function (config) {
    $loadingIndicator.style.visibility = 'visible'; 요청 직전에 loading UI를 보여주기
    return config;
}, function (error) {
    return Promise.reject(error);
})