axios封装,使用拦截器统一处理接口,超详细的教程
2018-08-14 14:38
931 查看
最近从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根据你个人情况,可加可不加。
[code]//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里面进行配置:
[code]/****** 创建axios实例 ******/ const service = axios.create({ baseURL: process.env.BASE_URL, // api的base_url timeout: 5000 // 请求超时时间 });
axios实例创建好之后,开始使用request拦截器对axios请求配置做统一处理,具体如下:
[code]/****** 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做统一处理,代码如下:
[code]/****** 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 ? '404' : '网络异常,请重试'; app.$vux.toast.show({ type: 'warn', text: text }); return Promise.reject(error) } );
最后,将我们的axios实例暴露出去,整个axios的封装就写完了。
[code]export default service;
2. axios接口的调用方式
axios封装好之后,调用就很简单了。我们把接口统一写在api.js文件里。(当然,如果你的业务非常复杂的话,建议把不同业务的api分开放到不同的文件里,这样方便以后维护)。
注意:post请求参数放在data里面,get请求参数放在params里。
[code]//api.js import service from './request' export const getPersonInfo = data => { return service({ url: '/person_pay/getpersoninfo', method: 'post', data }) };
然后在具体的组件中进行调用。
[code]//index.vue import {getPersonInfo} from '../axios/api.js' export default { created: async function () { const params = { card_no: '111' }; let res = await getPersonInfo(params); console.log(res); } }
第一次写博客,写的不好,请大家多多指教!
阅读更多相关文章推荐
- axios使用拦截器统一处理所有的http请求
- axios使用拦截器统一处理所有的http请求的方法
- Redis总结(五)缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结(一)AutoResetEvent的使用介绍(用AutoResetEvent实现同步) C#总结(二)事件Event 介绍总结 C#总结(三)DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列(六): RabbitMQ 高可用集群
- Rx系列学习笔记_使用okhttp拦截器统一处理返回请求
- 使用SoapUI测试调试web service接口详细教程
- axios 详细使用方法 及跨域请求(反向代理)的处理
- axios请求封装和异常统一处理
- 处理vue中使用Axios调用接口时出现的ie数据处理问题
- OKHttp使用拦截器(Interceptor)POST与GET方法,统一封装传公共参数
- SpringBoot基础教程2-1-6 日志规范-使用AOP统一处理Web日志
- ActionErrors 使用说明 struts validate 处理流程 详细教程
- 使用方法拦截器MethodInterceptor和AOP统一处理log
- 使用方法拦截器MethodInterceptor和AOP统一处理log (Spring的拦截器 对方法进行拦截 ))
- 使用方法拦截器MethodInterceptor和AOP统一处理log
- 使用方法拦截器MethodInterceptor和AOP统一处理log
- Spring Boot教程(六)使用AOP统一处理Web请求日志
- Interceptors拦截器——OkHttp3详细使用教程
- ActionErrors 使用说明 struts1 validate 处理流程 详细教程(转)
- axios 详细使用方法 及跨域请求(反向代理)的处理
- 使用方法拦截器MethodInterceptor和AOP统一处理log