在vue-cli中使用axios拦截

Question

使用vue-cli做了简单的项目，其中网络请求使用了axios，
但是不知道axios的拦截器该怎么挂载到项目上去。

假设我在一个js文件中写了如下代码：

// Add a request interceptor
this.axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    console.log('before sending')
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

那么怎样才能使得它在项目运行的时候生效呢?
*axios本身已在man.js中引入：

import axios from 'axios'
Vue.prototype.axios = axios

Answer 1

axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    console.log('before sending')
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

这段代码写在main.js里，或者写在其他文件下然后main.js引入那个文件

Answer 2

interceptor.js

import axios from 'axios'
axios.interceptors.request.use(function (config) {
  // Do something before request is sent
  console.log('before sending')
  return config;
}, function (error) {
  // Do something with request error
  return Promise.reject(error);
})
export default axios

man.js

import axios from './interceptor.js'
Vue.prototype.axios = axios

Answer 3

*axios本身已在main.js中引入：

import axios from 'axios'
Vue.prototype.axios = axios

你这里不对，既然你已经二次封装了axios，那么在main.js中一定是import axios from '你的这个js的路径'。

Answer 4

到底哪个对呢，是不是axios.js里 export default axios 了，然后main.js里就可以直接
import axios from 'axios'
Vue.prototype.axios = axios。???
在github上有这样的：

*import axios from 'axios';
import interceptors from './interceptors';
Vue.config.productionTip = false;
Vue.prototype.$ajax = axios;
const vm=new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');
interceptors(vm);*

也有这样的：

*import Vue from 'vue'
import axios from './http'
import store from './store/store'
import router from './router'
import App from './App.vue'
import VueMaterial from 'vue-material'
Vue.use(VueMaterial);
// 将axios挂载到prototype上，在组件中可以直接使用this.axios访问
Vue.prototype.axios = axios;
new Vue({
    el: '#app',
    axios,
    router,
    store,
    render: h => h(App)
}).$mount('#app');*

--------
'./interceptors'和 './http'分别为请求拦截

Answer 5

你的意思是不是你要单独在那个位置挂拦截？
如果你要全局挂拦截就在main.js的Vue.prototype.axios = axios前面写拦截像这样

import axios from 'axios'
axios.interceptors.request.use(config => {
  // 可以配置config
  return config;
}, err => {
  return Promise.reject(err);
});
Vue.prototype.axios = axios

如果你要组件或者某个js单独挂拦截的话

// import axios from 'axios'
// 如果在js而不是组件里要引一下

// js里就不用this了
// 单独配置要构造一个新的axios，看官方文档的参数，这里可以直接改配置
this._axios = this.axios.create()
this._axios.interceptors.request.use(config => {
  // 可以配置config
  return config;
}, err => {
  return Promise.reject(err);
});
// 之后用新的_axios就行了