axios封装，使用拦截器统一处理接口，超详细的教程（推封装，使用拦截器统一处理接口，超详细的教程（推
荐）荐）
主要介绍了axios封装使用拦截器处理接口，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一
定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
最近从0开始搭了一个vue-cli的项目， 虽然axios也可以直接拿来用，但是对接口比较零散，不太好进行维护，也会产生大量的
重复代码，所以笔者对axios进行了统一接口处理，废话不多说，直接上代码。
首先，在vue-cli项目的src路径下新建一个axios文件夹，在axios文件夹里新建aps.js和request.js，api.js用于写接口，对axios
的封装写在request.js里，项目机构如图：
1. axios统一封装统一封装
然后开始统一封装axios， 首先引入axios、qs依赖，引入main.js主要是用于后面对接口进行统一处理，比如调接口的时候，
显示loading等。这个main.js根据你个人情况，可加可不加。
//request.js
import axios from "axios";
import qs from "qs";
import app from "../main.js";
然后创建一个axios实例，这个process.env.BASE_URL在config/dev.evn.js、prod.evn.js里面进行配置：
/****** 创建axios实例 ******/
const service = axios.create({
baseURL: process.env.BASE_URL, // api的base_url
timeout: 5000 // 请求超时时间
});
axios实例创建好之后，开始使用request拦截器对axios请求配置做统一处理，具体如下：
/****** request拦截器==>对请求参数做处理 ******/
service.interceptors.request.use(config => {
app.$vux.loading.show({
text: '数据加载中……'
});
config.method === 'post'
? config.data = qs.stringify({...config.data})
: config.params = {...config.params};
config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
return config;
}, error => { //请求错误处理
app.$vux.toast.show({
type: 'warn',
text: error
});
Promise.reject(error)
});
然后是对response做统一处理，代码如下：
/****** respone拦截器==>对响应做处理 ******/
service.interceptors.response.use(
response => { //成功请求到数据
app.$vux.loading.hide();
//这里根据后端提供的数据进行对应的处理
if (response.data.result === 'TRUE') {
return response.data;
} else {
app.$vux.toast.show({ //常规错误处理
type: 'warn',
text: response.data.data.msg
});
}
},
error => { //响应错误处理
console.log('error');
console.log(error);
console.log(JSON.stringify(error));
let text = JSON.parse(JSON.stringify(error)).response.status === 404
资源评论
