axios实现原理(项目中Axios二次封装实例Demo)
类别:编程学习 浏览量:1143
时间:2022-01-15 01:45:20 axios实现原理
项目中Axios二次封装实例Demo1.为什么做封装?
方便代码整体调用、对请求做公共处理、个性化定制
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
您可能感兴趣
- axios实现原理(项目中Axios二次封装实例Demo)
- axios封装怎么实现(axios的简单封装以及使用实例代码)
- axios自动重复提交请求(Axios取消重复请求的方法实例详解)
- axios 请求前校验参数(js实现axios限制请求队列)
- vuephp后台开发框架(Vue+thinkphp5.1+axios实现文件上传)
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- axios如何跨域请求(axios取消请求与避免重复请求)
- axios调用接口(如何实现axios的自定义适配器adapter)
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- vue引入axios(vue封装axios的几种方法)
- axios原理和实现(GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析)
- vue怎么引入axios(如何用vue封装axios请求)
- axios并发请求数据(项目中如何使用axios过滤多次重复请求详解)
- 赵薇时胖时瘦 最近变美少女 原因在这里 躺着就变瘦(赵薇时胖时瘦最近变美)
- 学会这26种姿势,你就可以和兵哥哥切磋了(你就可以和兵哥哥切磋了)
- 吴彦祖陈冠希 恩怨 ,失去曾让他流泪的女友,终遇走过18年真爱(吴彦祖陈冠希恩怨)
- 痴情男神 吴彦祖 与妻子恋爱8年,结婚10年,家庭幸福美满(痴情男神吴彦祖)
- 成功破圈,小牛电动SQi强势开 跨(小牛电动SQi强势开)
- 挑战新国标电自天花板,九号机械师MMAX 110P深度体验(挑战新国标电自天花板)
热门推荐
- 缓存系统机制(Smarty缓存机制实例详解三种缓存方式)
- php如何定时执行某项(php解决crontab定时任务不能写入文件问题的方法分析)
- php创建文件(php创建多级目录与级联删除文件的方法示例)
- react初学难点(使用react的7个避坑案例小结)
- javascript函数工具有哪些(如何让你的JavaScript函数更加优雅详解)
- vue导出动态的excel功能(vue中如何下载excel流文件及设置下载文件名)
- javascript取下拉框显示值(JavaScript offset实现鼠标坐标获取和窗口内模块拖动)
- SQL replace的使用方法
- sqlserver替换脚本(SQL Server中对数据截取替换的方法详解)
- docker数据库如何初始化(Docker启动PostgreSQL时创建多个数据库的解决方案)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9