[Javascript] Axios: 인터셉터를 통한 로깅

인터셉터는 Axios의 훌륭한 편의기능 중 하나다.

요청을 할때, 혹은 응답을 받을때마다 트리거를 걸어서,
리퀘스트를 날리기 전, 리스폰스를 날리기 전마다 특정 함수가 실행되게 할 수 있다.

사용형태는 대략 아래와 같다. interceptors에 request와 response라는 필드가 있는데, 여기에 use로 콜백함수를 넘겨주면 된다.
콜백함수는 전달받은 request나 response 객체를 반드시 반환해줘야 한다.

그럼 여기서 request 객체나 response 객체 값을 조회하거나 조작할 수가 있다.

아마 대표적인 사용례 중 하나는, 로그를 찍을 때일 것이다.
인터셉터를 활용해 로깅 처리를 한다면 개발 및 디버깅이 아주 용이해진다.

const axios = require("axios");

axios.default.interceptors.request.use((request) => {
    console.log("요청: ", JSON.stringify(request));
    return request;
});

axios.default.interceptors.response.use(
    // 성공 (status 200, 300)
    (response) => {
        console.log("응답: ", JSON.stringify(response));
        return response;
    },
    // 실패 (status 400, 500)
    (response) => {
        console.error("응답: ", JSON.stringify(response));
        return response;
    }
);

그럼 요청을 쏠때마다

자동으로 잘 찍힐 것이다.

매번 귀찮게 로그를 찍어볼 필요가 없다.

참조
https://stackoverflow.com/questions/41751235/how-to-log-all-axios-calls-from-one-place-in-code#