Open rajeshwar-fissionhq opened 7 years ago
You can use axios https://github.com/mzabriskie/axios#interceptors
@ankurk91 example? i also can`t solve it
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);
}
);
@ankurk91 where vue-progressbar use
I don't want to troll, but let me know if you could not read my comments inside code above.
/**
* 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
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
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)
});
its also work, it
s true?
@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
How could I implement Progress bar for all api calls using vue-resource
not axios?
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.
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.