Progress bar for all api calls at one palce

How can we configure the progress bar for all api calls at global place. So that if any api call goes from our app, it will automatically shows the progress bar.

I’m using the below code for interceptors. But when i add it, it’s giving an error. The below code is in main.js where i’m setting the progress bar.

const options = {
  color: '#2ecc71',
  failedColor: '#f16559',
  thickness: '4px',
  transition: {
    speed: '0.2s',
    opacity: '0.5s',
    termination: 300,
  },
  autoRevert: true,
  location: 'top',
  inverse: false,
};
Vue.use(VueProgressBar, options);

Vue.http.interceptors.push((request, next) => {
  next((response) => {
    /** some response content**/
   });
});

How can we setup this so that it shows for all api calls, which will reduce the calling of below methods at all api calls.

this.$Progress.start();
this.$Progress.finish();

[busyhe]

import axios from 'axios'
import qs from 'qs'
import Vue from 'vue';
import VueProgressBar from 'vue-progressbar';

Vue.use(VueProgressBar, {});

// eslint-disable-next-line no-new
let newVue = new Vue({});

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    newVue.$Progress.start();
    return config
}, function (error) {
    return Promise.reject(error)
});

[ankurk91]

I don’t want to troll, but let me know if you could not read my comments inside code above.