vue中封装axios并实现api接口的统一管理

2023-07-07 19:14:08 299

在vue项目中，我们通常都是使用axios与后台进行数据交互，axios有很多好用的特性，这里不多做介绍，相关细节可以查阅axios中文网。在对axios进行封装之前，我们要使用vue脚手架工具创建一个vue项目（这里我用的是cli4）。

安装

cnpminstallaxios--save-dev;//安装axios
cnpminstallqs--save-dev;//安装qs模块，用来序列化post类型的数据，否则后端无法接收到数据

模块引入

在src目录下创建一个service目录，用于存放接口封装的相关文件。然后在service目录中创建service.js，用于axios、qs模块的引入，并在此文件中对axios进行封装。代码如下（接口域名只有一个的情况）：

importaxiosfrom'axios'//引入axios
importqsfrom'qs'//引入qs，用来序列化post类型的数据，否则后端无法接收到数据
//设置post请求头
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.withCredentials=false;//在跨域请求时，不会携带用户凭证；返回的response里也会忽略cookie

//创建axios实例，请求超时时间为300秒
constinstance=axios.create({
timeout:300000,
});

//请求和响应拦截可以根据实际项目需求进行编写
//请求发起前拦截
instance.interceptors.request.use((config)=>{
//这里可以对接口请求头进行操作如：config.headers['X-Token']=token
console.log("请求拦截",config);
returnconfig;
},(error)=>{
//Dosomethingwithrequesterror
returnPromise.reject(error)
})

//响应拦截（请求返回后拦截）
instance.interceptors.response.use(response=>{
console.log("响应拦截",response);
returnresponse;
},error=>{
console.log('catch',error)
returnPromise.reject(error)
})

//按照请求类型对axios进行封装
constapi={
get(url,data){
	returninstance.get(url,{params:data})
},
post(url,data){
	returninstance.post(url,qs.stringify(data))	
},
}
export{api}

上述代码是接口域名只有一个的情况（多数情况），当接口域名有多个的时候（少数情况），我们需要对之前的封装进行改造，代码如下：

importaxiosfrom'axios'//引入axios
importqsfrom'qs'//引入qs，用来序列化post类型的数据，否则后端无法接收到数据
//设置post请求头
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8';
axios.defaults.withCredentials=false;//在跨域请求时，不会携带用户凭证；返回的response里也会忽略cookie

//创建axios实例，请求超时时间为300秒，因为项目中有多个域名，所以对应的也要创建多个axios实例
constinstanceA=axios.create({
timeout:300000,
});
constinstanceB=axios.create({
timeout:300000,
});

//如果项目为单一域名，这里可以不用进行配置，当项目接口有多个域名时，要对axios实例基础路径进行配置，否则在项目生产环境中无法进行区别调用
if(process.env.NODE_ENV=='production'){
instanceA.defaults.baseURL='https://www.production_a.com';
instanceB.defaults.baseURL='https://www.production_b.com';
}

//请求和响应拦截可以根据实际项目需求进行编写
//请求发起前拦截
instanceA.interceptors.request.use((config)=>{
//这里可以对接口请求头进行操作如：config.headers['X-Token']=token
console.log("请求拦截",config);
returnconfig;
},(error)=>{
//Dosomethingwithrequesterror
returnPromise.reject(error)
})
instanceB.interceptors.request.use((config)=>{
console.log("请求拦截",config);
returnconfig;
},(error)=>{
//Dosomethingwithrequesterror
returnPromise.reject(error)
})

//响应拦截（请求返回后拦截）
instanceA.interceptors.response.use(response=>{
console.log("响应拦截",response);
returnresponse;
},error=>{
console.log('catch',error)
returnPromise.reject(error)
})
instanceB.interceptors.response.use(response=>{
console.log("响应拦截",response);
returnresponse;
},error=>{
console.log('catch',error)
returnPromise.reject(error)
})

//按照请求类型对axios进行封装
constapi={
get(url,data){
	returninstanceA.get(url,{params:data})
},
post(url,data){
	returninstanceA.post(url,qs.stringify(data))	
},
doGet(url,data){
	returninstanceB.get(url,{params:data})
},
doPost(url,data){
	returninstanceB.post(url,qs.stringify(data))	
}
}
export{api}

上述代码中有根据生产环境对axios实例的基础路径进行配置，如果项目中有多个环境（如：测试环境等），则需要对CLI4脚手架环境变量进行配置

api接口统一管理

将api接口按照功能模块进行拆分，把同一模块下的接口写在同一个文件中进行统一管理，这样代码会更容易维护。比如我们的项目中有新闻模块，音乐模块等。我们就在serviec目录中创建news.js、music.js文件，用于管理各自模块的所有api接口，这里我只拿news.js文件为例，代码如下：

import{api}from"./service.js";	
constnews={
	getNewsList(){//获取新闻列表
		returnapi.get("api/news/getNewsList")
	},
	editNewsDetail(data){//修改新闻详情
		returnapi.post("api/news/editNewsDetail",data);
	}
}
exportdefaultnews;

为了更方便在项目中调用这些封装好的接口，我们需要将这些接口挂载到vue的原型上，首先我们要在service目录中创建api.js文件，将所有模块的api管理文件引入进来，然后进行统一导出，代码如下：

//引入相关api管理模块
importnewsfrom"./news.js";
//进行统一导出
exportdefault{
	news
}

找到项目中的main.js文件,将接口挂载到vue的原型上，代码如下：

importVuefrom'vue'
importAppfrom'./App.vue'
importrouterfrom'./router'
importstorefrom'./store'
importaxiosfrom'axios'
Vue.prototype.axios=axios
Vue.config.productionTip=false
importapifrom"./service/api.js";
//将封装的接口挂载到vue原型上
Vue.prototype.$api=api;
newVue({
router,
store,
render:h=>h(App)
}).$mount('#app')

然后我们在项目创建完成时自动生成的模板文件App.vue调用封装好的接口，代码如下：




#app{
font-family:Avenir,Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-align:center;
color:#2c3e50;
}

#nav{
padding:30px;

a{
font-weight:bold;
color:#2c3e50;

&.router-link-exact-active{
color:#42b983;
}
}
}

配置代理

因为我们要在本地环境进行测试，这就涉及到了跨域问题，为了解决跨域问题，我们可以进行代理的配置，在项目根目录中创建vue.config.js文件，然后可以对项目进行各种配置，代理的配置方法如下：

//vue.config.js
module.exports={
//输出文件目录
outputDir:"dist",
//eslint-loader是否在保存的时候检查
lintOnSave:false,
//基本路径
publicPath:process.env.NODE_ENV==="production"?"./":"/",
devServer:{
host:"localhost",
port:8080,
open:true,
hotOnly:true,//热更新
//设置代理
proxy:{
"/api":{
//本地mock服务器
target:"https://www.xxxx.com/xxx/",
changeOrigin:true,
ws:false,				
},
//如果项目中存在多个域名接口，可依次进行配置
	"/apib":{
		target:"https://www.xxxx.com/xxx/",
		changeOrigin:true,
		ws:false,
	},
},
},
};

代理配置好了之后，就可以运行项目了，命令行中输入npmrunserve,项目启动好了之后，就可以进入页面点击按钮，测试之前做的封装是否好用。

结语

以上就是本人对vue中封装axios的一点心得，文章有错误或需要改进的地方还请与我联系，我将及时进行更正，感谢阅读。

以上就是vue中封装axios并实现api接口的统一管理的详细内容，更多关于vue封装axios的资料请关注毛票票其它相关文章！

vue中封装axios并实现api接口的统一管理

安装

模块引入

api接口统一管理

配置代理

结语

热门推荐

随机推荐