vue axios 拦截器

若需要对http的请求参数做一些复杂的处理，统一的配置，或者对返回的结果进行处理，此时需要一个 拦截器 interceptors

1.下载axios

npm i axios

2.配置参数

// 引入axios
import axios from 'axios'
const qs = require('qs');

// 解决跨域请求cookie问题
axios.defaults.withCredentials = true;
// 请求接口统一域名
axios.defaults.baseURL = 'https://xxxx';

// http request 请求拦截器
axios.interceptors.request.use(
  config => {
  	// get参数 需要对 config.params 处理
	// post参数 处理为Form data 格式
    config.data = qs.stringify({ data: data });
    // header参数 header加上DEVICETOKEN
    config.headers.DEVICETOKEN = 'xxxxx';
    return config;
  },
  error => {
    return Promise.reject(error);
  });

export default axios; //打包为axiosJS文件

3.在vue中运用

在main.js中引用

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
// 引入axios
import axiosJS from './axiosJS.js'
Vue.prototype.axios = axiosJS

// http response 拦截器
axios.interceptors.response.use(
  res => {
  	// 对options处理
    if (res.config.method == 'options') {
      return false;
    }
    
    // 对错误码处理
    if (res.data.data.errCode == 8005) {
      // 若需要用到store中的方法
      store.commit('logout');
      // 若需要对路由处理
      router.push({
        path: "/login"
      });
    }
    // 将正确结果返回
    return res.data;
  },
  error => {
  	// 返回接口返回的错误信息
    return Promise.reject(error) 
  }
);
  
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

我的个人博客有空来坐坐

https://www.wangyanan.online