axios 요청 응답 시 오버레이 로딩 이미지 띄우기 (axios beforeSend)

결론부터

jQuery ajax의 beforeSend 같은 기능을 axios에서 구현하고 싶다면, interceptor를 설정하면 된다.

오버레이 로딩, 스피너(뺑글뺑글 이미지) 등 여러가지 이름으로 불리지만, 어쨌든 마음에 드는 것을 쓰면 된다.

주의: 로딩 띄우는 것은 요청 전에만, 나머지는 로딩 오버레이를 꺼야한다.

지금은 Vue.js로 개발하고 있기 때문에 store에 loading이라는 상태를 만들고 app.vue에 오버레이 로딩 컴포넌트를 삽입하여 $store.state.loading을 참조하게 했다. mutation에는 startLoading, endLoading을 만들어 아래 인터셉터에서 스토어의 상태를 바꾼다.

아래 코드는 axios 공식 문서에서 주석만 수정한 것이다. 해당 위치에서 오버레이 로딩 켜고 끄기를 호출해주면 된다. 커스텀 인스턴스를 만들어 사용하는 것이 관리하기 편하다.

코드

인터셉터 추가

// 요청 인터셉터
axios.interceptors.request.use(function (config) {
    // 요청 전에 로딩 오버레이 띄우기
    return config;
  }, function (error) {
    // 에라 나면 로딩 끄기
    return Promise.reject(error);
  });

// 응답 인터셉터
axios.interceptors.response.use(function (response) {
    // 응답 받으면 로딩 끄기
    return response;
  }, function (error) {
    // 응답 에러 시에도 로딩 끄기
    return Promise.reject(error);
  });

인터셉터 제거

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

커스텀 인스턴스에 인터셉터 추가

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});