axios封装统一处理接口,axios 二次封装
vue项目中经常使用Axios来请求数据，所以首先肯定要对这个请求方法进行二次封装。本文主要介绍项目中Axios二次封装的相关信息，有需要的朋友可以参考一下。
1.为什么做封装？
方便整体调用代码，公开处理请求，单独定制。
2.别人已经封装了很多，为什么不直接修改使用？
包装思路不适合自己的项目。
封装后不方便调用。
3.个人封装demo
代码结构[基于vue]
基本思路
将所有请求接口地址按文件存储在模块中，如请求/模块/用户用户信息相关模块[服务]
2.封装方法和类。将通用请求方法绑定到所有请求，并处理请求url上的路径参数。
generateServer.js
导入服务器自./util/axioconfig ；
//修改axios基本配置和请求配置。
功能请求({
url，
方法=get ，
queryParm={}，
body={}，
pathParm=null，
config={}，
}) {
const configAxios={
方法，
.配置，
url: dealRequestUrl(url，pathParm)，
};
开关(方法){
大小写“get”:
config axios . params=query parm；
打破；
默认值：
//请求方法“PUT”、“POST”和“PATCH”
configAxios.data=body
打破；
}
console.log(configAxios ，configAxios)
返回服务器(configAxios)；
}
函数dealRequestUrl(url，pathParm) {
如果(！pathParm)返回url
设dealurl=url
Object.keys(pathParm)。forEach((ele)={
deal URL=deal URL . replace(` { $ { ele } } `，path parm[ele])；
});
返回dealurl
}
类生成服务器{
构造函数(url) {
this.url=url
}
获取数据(参数){
console.log(parm ，parm)
退货请求({.parm，method: get ，URL:this . URL })；
}
后期数据(参数){
退货请求({.parm，method: post ，URL:this . URL })；
}
删除数据(参数){
退货请求({.parm，method: delete ，URL:this . URL })；
}
}
导出默认GenerateServer
3.整个就暴露了。
使用
从“”导入{ userInfoServer }。/request ；。
//发送请求
userInfoServer.getUserName。getdata({
queryParm: {
id: 223，
},
})。然后((res)={
console.log(res ，RES)；
});
//发送请求
userInfoServer.getUserName。postdata({
正文：{
id: 223，
},
})。然后((res)={
console.log(res ，RES)；
});
//在请求路径中发送带有参数的get请求
userInfoServer.getUserList。getdata({
queryParm: {
id: 223，
},
pathParm: {
编号：567，
},
})。然后((res)={
console.log(res ，RES)；
});
总结：
以上封装主要是对请求进行细致的拆分，便于维护。也方便开发。对于新的接口需求，只需要在相应的模块中添加URl配置和响应的生成器配置。可以在业务代码中处理该请求。路径参数和请求主体参数被封装，因此在使用它们时不需要关心相应的配置。
上面的代码不处理文件上传，获取请求参数字符串等等。但只需在相应的axios中添加配置即可。易于维护。
关于Axios在项目中的二次打包的这篇文章到此为止。有关Axios第二次包装的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
代码git:git
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。