Display a loading indicator while Axios sends the Ajax request

Question

Display a loading indicator while Axios sends the Ajax request

I'm currently working on a Vue app and I am utilizing Axios for API calls. Before each call, I display a loading icon that hides once the call is completed.

I'm curious if there is a way to implement this functionality globally so that I don't need to include the show/hide loading icon logic in every API call?

This is my current code snippet:

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'});
    });

I have come across information about "interceptors" in the Axios documentation but I am unsure whether they apply at a global level or are specific to each call.

I also found a jQuery solution in a post, but I am not sure how to adapt it for use in Vue:

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

javascript vue.js vuejs2 axios

Answer 1

Answer №1

To implement Axios interceptors in Vue.js, you can set them up within the root component's created lifecycle hook, such as in the App.vue file:

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

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

Managing the global loading state while handling multiple concurrent Axios requests requires tracking the request count. To do this, increment the count on each request, decrement it when the request resolves, and clear the loading state when the 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);
    }
  }
}

For a demonstration of this setup, you can check out this demo.

Answer 2

To implement Axios interceptors in Vue.js, you can set them up within the root component's created lifecycle hook, such as in the App.vue file:

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

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

Managing the global loading state while handling multiple concurrent Axios requests requires tracking the request count. To do this, increment the count on each request, decrement it when the request resolves, and clear the loading state when the 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);
    }
  }
}

For a demonstration of this setup, you can check out this demo.

Answer 3

Answer №2

It seems like you're heading in the right direction by using dispatch event when ajax calls start and finish.

To achieve this, you can intercept the XMLHttpRequest call using axios interceptors as shown below:

axios.interceptors.request.use(function(config) {
  // Perform actions before sending the request
  console.log('Start Ajax Call');
  return config;
}, function(error) {
  // Handle errors with the request
  console.log('Error');
  return Promise.reject(error);
});

axios.interceptors.response.use(function(response) {
  // Perform actions with the response data
  console.log('Done with Ajax call');

  return response;
}, function(error) {
  // Handle errors with the response
  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>

Answer 4

It seems like you're heading in the right direction by using dispatch event when ajax calls start and finish.

To achieve this, you can intercept the XMLHttpRequest call using axios interceptors as shown below:

axios.interceptors.request.use(function(config) {
  // Perform actions before sending the request
  console.log('Start Ajax Call');
  return config;
}, function(error) {
  // Handle errors with the request
  console.log('Error');
  return Promise.reject(error);
});

axios.interceptors.response.use(function(response) {
  // Perform actions with the response data
  console.log('Done with Ajax call');

  return response;
}, function(error) {
  // Handle errors with the response
  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>

Answer 5

Answer №3

Utilizing Nuxt alongside the $axios plugin

modules: ['@nuxtjs/axios', ...]

plugins/axios.js

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.js


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')
    }
  }
}

Illustrating a process involving token validation using $axios and store management

Answer 6

Utilizing Nuxt alongside the $axios plugin

modules: ['@nuxtjs/axios', ...]

plugins/axios.js

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.js


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')
    }
  }
}

Illustrating a process involving token validation using $axios and store management

Display a loading indicator while Axios sends the Ajax request

Answer №1

Answer №2

Answer №3

plugins/axios.js

store/index.js

Similar questions

Error: The jQuery TableSorter Plugin is unable to access property '1' as it is undefined

Facing challenges in both client-side and server-side components

I am interested in incorporating pinia state management into my Vue 3 project

Changing the CSS class of the Bootstrap datetime picker when selecting the year

I'm currently attempting to determine the total cost of a series of operations, however, I am not receiving any results

Issue encountered with the style parameter in print-js when attempting to print from a Vue.js component

Unable to access $_POST parameters in PHP when making an Ajax request

Router DOM in conjunction with Next.js

Insert a numerical value into a list to make a series of numbers whole

Learn the simple steps to duplicate events using ctrl, drag, and drop feature in FullCalendar v5 with just pure JavaScript

Adjust the HTML content prior to displaying it to prevent any flickering

Is it beneficial to vary the time between function calls when utilizing setInterval in JavaScript?

Is there a way to disable page prefetching for Next.js Link when hovering over it?

"Troubleshooting: Issue with the custom rule 'isBetween' validation in Vee validate

HTML stubbornly resists incorporating Javascript [UIWebView]

Adjust the location of the slider scrollbar in jQuery UI

Output JSON data from PHP for use in Javascript

MapBox notifies when all map tiles have finished loading

Strange behavior of Lambda function in Typescript

Steps for accessing the "this" keyword within the parent function