vue项目axios封装，请求、响应拦截，统一处理

在src目录下新建文件夹request，request下新建文件axios.js。
引入axios，如果有需要可再引入UI框架，做一些提示或弹窗。我的项目用的vant。

import axios from 'axios'
import { Toast } from 'vant'

设置请求时间：超时后会在error的response抛出异常

axios.defaults.timeout = 5000;

请求拦截

axios.interceptors.request.use(config => {
//config是请求的一些参数配置
  return config;
}, err => {
  Toast('请求超时');
  return Promise.resolve(err);
});

响应拦截，里面可以做一些统一校验、状态判断等等，不用在每个组件里面操作了。

axios.interceptors.response.use(response => {
//做一些必要的校验，是否请求成功，返回结果是否有效
  if(response.data.code == "0"){
    return response;
  }else{
    Toast('服务器错误，请重试');
  }
}, err => {
  Toast('响应超时或连接错误，请重试');
  return Promise.resolve(err);
});

导出post和get两种请求方式。
以module语法导出，方便引入和调用方法。

export default {
  // get请求，以接口地址作为参数即可
  getRequest : (url) => {
    return axios({
      method: 'get',
      url: url
    });
  },
  /**
   * post请求
   * url
   * param 参数
   */
  postRequest : (url,param) => {
    return axios({
      method: 'post',
      url: url,
      data: param
    });
  }
}

在main.js全局挂载

// 引入axios封装
import axios from './request/axios.js'
Vue.prototype.axios = axios;

在有请求的文件中调用。
因为已将axios挂载到vue原型上，所以直接用this可点出axios。

//get请求
this.axios.getRequest(url).then(res => {
//后续处理
}).catch(res => {
//异常处理
})

//post请求
this.axios.postRequest(url,param).then(res => {
//后续处理
}).catch(res => {
//异常处理
})

这样就实现了接口的统一请求和处理，是不是很简单？

第一次写，欢迎各位大佬留言指出不足之处~