项目中Axios二次封装实例Demo
1.为什么做封装?
方便代码整体调用、对请求做公共处理、个性化定制
2.别人已经封装了很多,为什么不直接修改使用?
- 封装思路不适合自身项目
- 封装后调用不方便
3.个人封装demo
代码结构【基于vue】
基本思路
将所有的请求接口地址按照文件分模块存储,比如 request/module/user 用户信息相关模块【服务】
2.封装方法、类。给所有请求绑定常用的请求方法,和对请求url上的路径参数做处理
generateServer.js
import server from "../util/axiosConfig"; // 修改axios基本配置,请求配置 function request({ url, method = "get", queryParm = {}, body = {}, pathParm = null, config = {}, }) { const configAxios = { method, ...config, url: dealRequestUrl(url, pathParm), }; switch (method) { case "get": configAxios.params = queryParm; break; default: // 请求方法 'PUT', 'POST', 和 'PATCH' configAxios.data = body; break; } console.log('configAxios', configAxios) return server(configAxios); } function dealRequestUrl(url, pathParm) { if (!pathParm) return url; let dealurl = url; Object.keys(pathParm).forEach((ele) => { dealurl = dealurl.replace(`{${ele}}`, pathParm[ele]); }); return dealurl; } class GenerateServer { constructor(url) { this.url = url; } getdata(parm) { console.log('parm', parm) return request({ ...parm, method: "get", url: this.url }); } postdata(parm) { return request({ ...parm, method: "post", url: this.url }); } deletedata(parm) { return request({ ...parm, method: "delete", url: this.url }); } } export default GenerateServer;
3.整体暴露出去
使用
import { userInfoServer } from "./request"; . . . // 发送请求 userInfoServer.getUserName .getdata({ queryParm: { id: 223, }, }) .then((res) => { console.log("res", res); }); // 发送请求 userInfoServer.getUserName .postdata({ body: { id: 223, }, }) .then((res) => { console.log("res", res); }); // 发送get请求,请求路径带参数 userInfoServer.getUserList .getdata({ queryParm: { id: 223, }, pathParm: { id: 567, }, }) .then((res) => { console.log("res", res); });
总结:
上述的封装,主要是对请求拆分比较细致,便于维护。开发时也比较方便。对于新接口需求,只需要在对应模块增加URl配置和响应的生成器配置。便可以在业务代码里面处理请求。对于路径参数和请求体参数做了封装,使用时不需要关心相应的配置。
上述代码没有处理文件上传、get请求参数字符串等情况。但是在对应的axios里面增加配置即可。维护方便。
到此这篇关于项目中Axios二次封装的文章就介绍到这了,更多相关Axios二次封装内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
代码git:git
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
Ant design vue table 单击行选中 勾选checkbox教程
这篇文章主要介绍了Ant design vue table 单击行选中 勾选checkbox教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-25- 这篇文章主要介绍了Vue select 绑定动态变量的实例讲解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-23
- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 这篇文章主要介绍了vue接口请求加密实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12