一、现象
 
统一处理错误及配置请求信息
 
 
 
二、解决
 
1、安装 axios  , 命令： npm install axios --save-dev
 
2、在根目录的config目录下新建文件 axios.js  ，内容如下：
 
import axios from 'axios'
 
// 配置默认的host,假如你的API host是：http://api.htmlx.club
axios.defaults.baseURL = 'http://api.htmlx.club'    
 
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
 　　// 在发送请求之前做些什么
 　　return config
}, function (error) {
 　　// 对请求错误做些什么
 return Promise.reject(error)
});
 
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
 　　// 对响应数据做点什么
 　　return response
}, function (error) {
 　　// 对响应错误做点什么
 　　return Promise.reject(error)
});
 
 
 
3、在main.js中进行引用，并配置一个别名（$ajax）来进行调用:
 
import axios from 'axios'
import '../config/axios'
 
Vue.prototype.$ajax = axios
 
如图：
 
 
 
 
 
 
4、应用，一个登录的post如：
 
this.$ajax({
 　　method: 'post',
 　　url: '/login',
 　　data: {
 　　　　'userName': 'xxx',
 　　　　'password': 'xxx'
 　　}
 }).then(res => {
 　　console.log(res)
 })
 
三、总结
 
统一处理方便
 
 

前言
 
提示：项目中使用到的axios请求拦截器，在此仅仅是记录，以下附上全部代码。
 
 
1.引入axios
 
import axios from "axios";
import { MessageBox } from 'element-ui'  //可以不用，此处是使用elementUI 的弹框
 
2.设置请求基础路径
 
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
 
3.挂载请求拦截器
 
// request 拦截器
//挂载请求拦截器 (相当于请求的预验证，请求到达服务器之前先验证这次请求)
axios.interceptors.request.use(config => {
  //为请求头添加对象，添加token验证的Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem("token");
  return config;
});
 
4.挂载响应拦截器
 
// response 拦截器
axios.interceptors.response.use(
  response => {
    const code = response.status;
    if (code == 504) {
      MessageBox.confirm("网络请求超时", "提示", {
        showCancelButton: false,
        type: "warning"
      });
      return Promise.reject(error);
    }
    if (code < 200 || code > 300) {
      MessageBox.confirm(response.message, "提示", {
        showCancelButton: false,
        type: "warning"
      });
      return Promise.reject("error");
    } else {
      // console.log(response.data, "拦截 请求的 response.data");
      if (response.data.status === -1) {
        let statusText = "";
        if (response.data.statusText) {
          if (response.data.statusText.indexOf(":") !== -1) {
            statusText = response.data.statusText.replace(":", "");
          }
        }
        if (statusText) {
          console.log(statusText, "44444");
          MessageBox.confirm(statusText, "提示", {
            showCancelButton: false,
            type: "warning"
          });
        } else {
          MessageBox.confirm(response.data.statusText, "提示", {
            showCancelButton: false,
            type: "warning"
          });
        }
        return Promise.reject(response.data);
      }
      return response;
    }
  },
  //响应错误拦截
  error => {
    let code = 0;
    try {
      code = error.response.status;
    } catch (e) {
      if (error.toString().indexOf("Error: timeout") !== -1) {
        MessageBox.confirm("网络请求超时", "提示", {
          showCancelButton: false,
          type: "warning"
        });
        return Promise.reject(error);
      }
      if (error.toString().indexOf("Error: Network Error") !== -1) {
        MessageBox.confirm("网络请求错误", "提示", {
          showCancelButton: false,
          type: "warning"
        });
        return Promise.reject(error);
      }
    }
    if (code === 401) {
      MessageBox.confirm("登录状态已过期，请重新登录", "系统提示", {
        confirmButtonText: "重新登录",
        showCancelButton: false,
        showClose: false,
        type: "warning"
      }).then(() => {
        // store.dispatch("LogOut").then(() => {
        //   location.reload(); // 为了重新实例化vue-router对象 避免bug
        // });
      });
    } else if (code === 403) {
      router.push({ path: "/401" });
    } else {
      const errorMsg = error.response.data.message;
      if (errorMsg !== undefined) {
        MessageBox.confirm(errorMsg, "提示", {
          confirmButtonText: "确定",
          showCancelButton: false,
          showClose: false,
          type: "warning"
        });
      }
    }
    return Promise.reject(error);
  }
);
export default axios;

 
5.main.js中引入，挂载到vue原型上
 
// 引入具有拦截请求的axios
import xhrAxios from "./utils/xhrAxios";
Vue.prototype.$http = xhrAxios;
 
 
打包带走之前记得点赞啊！！！

 
vue添加全局拦截器

 
为了统一处理错误及配置请求信息可以设置拦截器，本文是登录过期设置，过期后跳到登录页
 
安装 axios , 命令： npm install axios --save-dev
在src目录的新建config文件夹，并在config目录下新建文件 axiosConfig.js ，内容如下
 

import axios from 'axios'
import { Message } from 'element-ui'//引用elementui的信息提示框，根据个人选择可以不用
import Router from '../router'

// Add a request interceptor
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config
}, function (error) {
// Do something with request error
Message.error({
message: '请求错误：' + error.message
})
return Promise.reject(error)
})

// Add a response interceptor
axios.interceptors.response.use(function (response) {
// console.log('response')
// Do something with response data
// console.log(response)
//返回参数是noLogin时，返回首页
if (response.data.flag === 'noLogin') {
Router.push('/')
Message.error({
message: '当前会话过期'
})
}
return response
}, function (error) {
// Do something with response error
let msg = error.message
if (error.response.status === 401) {
msg = '当前会话已过期。'
Router.push('/')
}
Message.error({
message: '响应错误：' + msg
})
return Promise.reject(error)
})
export default axios
 
3、 在main.js中进行引用，并配置一个别名来进行调用
 
import Axios from '@/config/axiosConfig'

Vue.prototype.$http = Axios
 
4、post请求格式
 
this.$http.post(url).then(res=>{
    console.log(res)
    }).catch(res=>{
 console.log(res)
})

原理
 
axios有一个请求拦截器机制，所有的axios请求在发出来之前都会经过请求拦截器, 在请求或响应被 then 或 catch 处理前拦截它们检查vuex中是否有token信息，有就直接加在headers中。
 
 
 

代码实现
 
// 在普通的.js模块中去使用store需要import导入
import store from '../store/index.js'

// 添加请求拦截器
instance.interceptors.request.use(function (config) {      
  const token = store.state.tokenInfo.token 
  // 如果有token就带上将token添加到config.headers.Authorization中
  if (token) {            
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, function (error) {
  return Promise.reject(error)
})