vue中axios拦截器的使用

1. 在vue项目中下载axios

npm install axios --save-dev

2. 在项目下新建http.js文件

/* eslint-disable */
//简化后的代码，其中具体业务处理部分按自己项目需求添加
import axios from 'axios'

const instance = axios.create({
  baseURL: process.env.API_ROOT,//请求基础路径
  timeout: 10000,//超时设置，根据具体需求
});

//请求拦截器可以在请求前做一些统一处理，比如加请求头、超时处理等
instance.interceptors.request.use(
  config => {
    config.headers['X-Requested-With'] = 'XMLHttpRequest'
    config.headers['Content-Type'] = 'application/json; charset=UTF-8' 
    return config
  },
  error => {
   	console.log(error)
    return Promise.reject(error)
  }
)
// http响应拦截器
instance.interceptors.response.use(res => {
    //可以根据后端返回的状态码判断，比如登录失效，请求返回错误等的处理
    if(res.data.error == 5004){
      //登录token失效的时候可以进行一些操作，比如提示，跳转登录页
    }
    return res
  },
  error => {
  	return Promise.reject(error)
  }
)

export default instance

3.在main.js中引入

import axios from '@/assets/js/http'
Vue.prototype.$http = axios

4.组件中使用

//1.直接使用
this.$http.get(`url?param=${param}`)
.then(res => {

}).catch(err=>{

})
//2.当然你也可以创建一个api.js文件，将请求统一管理，暴露method和params，然后抛出一个promise也是可以的