Vue中如何使用axios请求拦截和响应拦截

Vue中如何使用axios请求拦截和响应拦截,首先要创建一个模块做请求拦截和响应拦截…

/**
 * 此模块为封装的axios,分发不同域名的接口和请求自动添加token
 */
import Vue from 'vue'
import axios from "axios";
import cookie from './cookie';
import baseURL from './baseurl';
import {
  Message
} from "element-ui";
import qs from "querystring"

Vue.component(Message.name, Message);

var instance = axios.create({});
instance.interceptors.request.use((config) => {

  let url = config.url;
  //调用登录的时候不需要token
  config.headers.token = cookie.getCookie("schooltoke") || "";
  config.headers.userInfo = cookie.getCookie("userInfo") || "";
  config.baseURL = baseURL.backend;
  if (url.indexOf("/faceentrance/") > -1) {
    config.baseURL = baseURL.facepass;
  }
  if (url.indexOf("/agentjs/") > -1 || url.indexOf("/nxadmindzyxjs/") > -1 || url.indexOf("/nxdzyxjs/") > -1 || url.indexOf("/dzyxjs/") > -1) {
    config.baseURL = baseURL.goodclass;
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'
    config.data = qs.stringify(config.data);
    console.log("config.data", config.data)
  }
  return config;
}, (err) => {
  return Promise.resolve(err);
});


instance.interceptors.response.use((res) => {
  if (res.data.responseCode != 200) {
    if (res.data.responseMessage) {
      Message.error(res.data.responseMessage);
    }
  }
  if (res.data.responseCode == "400005" || res.data.responseCode == "9998") {
    // location.href = baseURL.productUrl;
  }
  return res;
}, (err) => {
  return err;
});
export default instance;

以上模块为封装的axios,分发不同域名的接口和请求自动添加token
将以上模块引入至main.js中

import axios from './util/http'
import 'element-ui/lib/theme-chalk/index.css'
import '@/assets/style/icon.css'
import 'element-ui/lib/theme-chalk/base.css';
import animated from '@/assets/style/animate.css'
import '@/assets/style/transition.css'
import '@/assets/font/font.css'
import cookie from './util/cookie'

Vue.use(ElementUI)
Vue.use(animated)
Vue.prototype.$axios = axios
Vue.prototype.$cookie = cookie
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  axios,
  components: { App },
  template: '<App/>'
})

引入候挂载Vue原型上,之后可以通过this.$axios使用…