Axios ajax, Ajax 요청 시 로드 표시

Axios ajax, Ajax 요청 시 로드 표시

현재 vue 앱과 acios를 사용하여 Im을 만들고 있습니다.로딩 아이콘은 전화를 걸기 전에 표시하고 그 후에 숨깁니다.

모든 콜에 show/hide loading 아이콘을 쓰지 않아도 되는 글로벌한 방법이 있는지 궁금합니다.

지금 가지고 있는 코드는 다음과 같습니다.

context.dispatch('loading', true, {root: true});
axios.post(url,data).then((response) => {
        // some code
        context.dispatch('loading', false, {root: true});
    }).catch(function (error) {
        // some code
        context.dispatch('loading', false, {root: true});color: 'error'});
    });

Axios 문서에서 "인터셉터"가 있는 것을 확인했지만 글로벌 수준인지 콜마다 있는지 알 수 없습니다.

jquery 솔루션에 대한 이 게시물도 봤는데 vue에 구현하는 방법은 잘 모르겠습니다.

$('#loading-image').bind('ajaxStart', function(){
    $(this).show();
}).bind('ajaxStop', function(){
    $(this).hide();
});

루트 컴포넌트의 Axios 인터셉터를 셋업합니다.created라이프 사이클 훅(예:App.vue):

created() {
  axios.interceptors.request.use((config) => {
    // trigger 'loading=true' event here
    return config;
  }, (error) => {
    // trigger 'loading=false' event here
    return Promise.reject(error);
  });

  axios.interceptors.response.use((response) => {
    // trigger 'loading=false' event here
    return response;
  }, (error) => {
    // trigger 'loading=false' event here
    return Promise.reject(error);
  });
}

각각 응답 시간이 다른 여러 Axios 요청이 동시에 존재할 수 있으므로 글로벌 로드 상태(각 요청의 증가, 각 요청이 해결되면 감소, 카운트가 0에 도달하면 로드 상태 지우기)를 적절하게 관리하기 위해 요청 수를 추적해야 합니다.

data() {
  return {
    refCount: 0,
    isLoading: false
  }
},
methods: {
  setLoading(isLoading) {
    if (isLoading) {
      this.refCount++;
      this.isLoading = true;
    } else if (this.refCount > 0) {
      this.refCount--;
      this.isLoading = (this.refCount > 0);
    }
  }
}

데모

에이잭스 콜 시작과 종료 시 디스패치이벤트는 올바른 경로라고 생각합니다.

이 방법은 다음과 같이 액시우스 인터셉터를 사용하여 XMLHttpRequest 콜을 대행 수신하는 것입니다.

axios.interceptors.request.use(function(config) {
  // Do something before request is sent
  console.log('Start Ajax Call');
  return config;
}, function(error) {
  // Do something with request error
  console.log('Error');
  return Promise.reject(error);
});

axios.interceptors.response.use(function(response) {
  // Do something with response data
  console.log('Done with Ajax call');

  return response;
}, function(error) {
  // Do something with response error
  console.log('Error fetching the data');
  return Promise.reject(error);
});

function getData() {
  const url = 'https://jsonplaceholder.typicode.com/posts/1';
  axios.get(url).then((data) => console.log('REQUEST DATA'));
}

function failToGetData() {
  const url = 'https://bad_url.com';
  axios.get(url).then((data) => console.log('REQUEST DATA'));
}

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<button onclick="getData()">Get Data</button>
<button onclick="failToGetData()">Error</button>

$axios 플러그인을 사용하는 Nuxt의 경우

모듈: ['@nuxtjs/modules', ...]

플러그 인/플러그 인/솔루션.솔루션

export default ({ app, $axios ,store }) => {
  const token = app.$cookies.get("token")
  if (token) {
    $axios.defaults.headers.common.Authorization = "Token " + token
  }
  $axios.interceptors.request.use((config) => {
    store.commit("SET_DATA", { data:true, id: "loading" });
    return config;
  }, (error) => {
    return Promise.reject(error);
  });

  $axios.interceptors.response.use((response) => {
    store.commit("SET_DATA", { data:false, id: "loading" });
    return response;
  }, (error) => {
    return Promise.reject(error);
  })
}

store/index.displaces

export default {
  state: () => ({
    loading: false
  }),
  mutations: {
    SET_DATA(state, { id, data }) {
      state[id] = data
    }
  },
  actions: {
    async nuxtServerInit({ dispatch, commit }, { app, req , redirect }) {
      const token = app.$cookies.get("token")
      if (token) {
        this.$axios.defaults.headers.common.Authorization = "Token " + token
      }
      let status = await dispatch("authentication/checkUser", { token })
      if(!status) redirect('/aut/login')
    }
  }
}

이 예에서는 $axios와 store를 포함한 토큰체크를 수반합니다.

언급URL : https://stackoverflow.com/questions/50768678/axios-ajax-show-loading-when-making-ajax-request