Axios ajax, show loading when making ajax request Axios ajax, show loading when making ajax request vue.js vue.js

Axios ajax, show loading when making ajax request


I would setup Axios interceptors in the root component's created lifecycle hook (e.g. 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);  });}

Since you could have multiple concurrent Axios requests, each with different response times, you'd have to track the request count to properly manage the global loading state (increment on each request, decrement when each request resolves, and clear the loading state when count reaches 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);    }  }}

demo


I think you are on the right path with dispatch event when ajax call start and finish.

The way that I think you can go about it is to intercept the XMLHttpRequest call using axios interceptors like so:

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>