Progress bar for all api calls at one palce

[rajeshwar-fissionhq]

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();

[ankurk91]

You can use axios https://github.com/mzabriskie/axios#interceptors

[busyhe]

@ankurk91 example? i also can`t solve it

[ankurk91]

Do some thing like

// Intercept all requests
  window.axios.interceptors.request.use(
    (config) => {
     // do something before sending requests
      return config
    },
    (error) => {
      return Promise.reject(error);
    }
  );

// Intercept all responses
window.axios.interceptors.response.use(
  (response) => {
   // when success from server
    return response;
  },

  (error) => {
   // when error from server
    return Promise.reject(error);
  }
);

[busyhe]

@ankurk91 where vue-progressbar use

[ankurk91]

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

[busyhe]

/**
 * Created by busyhe on 2017/12/20 下午10:43.
 * Email: 525118368@qq.com
 */
import axios from 'axios'
import qs from 'qs'

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

// 添加返回拦截器
axios.interceptors.response.use(function (res) {
    return res
}, function (error) {
    return Promise.reject(error)
});

this my code, but i can`t use VueProgressBar, so Nprogress can help me

[ankurk91]

Not tested but you can do something like this -

window.axios = require('axios');
import Vue from 'vue';
import VueProgressBar from 'vue-progressbar';

Vue.use(VueProgressBar, {});

// Intercept all requests
  window.axios.interceptors.request.use(
    (config) => {
     // do something before sending requests
     Vue.$Progress.start()
      return config
    },
    (error) => {
      return Promise.reject(error);
    }
  );

// Intercept all responses
window.axios.interceptors.response.use(
  (response) => {
   // when success from server
    Vue.$Progress.finish()
    return response;
  },

  (error) => {
   // when error from server
    Vue.$Progress.fail()
    return Promise.reject(error);
  }
);

Now whenever you make an axios call your global axios hooks will trigger vue-progress. That's all i can help.

To remove the confusion -

// use this inside component
this.$Progress 
// use outside component
Vue.$Progress

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

[busyhe]

its also work, its true？

[malinbranduse]

@BusyHe Check out my the example I wrote for this in a pull request. It's similar to what you wrote but it's a more robust solution, getting the main Vue instance

[srabanicn]

How could I implement Progress bar for all api calls using vue-resource not axios?