vue之封装多个组件调用同一接口的案例
背景：项目中有多个组件调用同一接口，为提高代码可维护性，需要封装公共方法
直接return接口调用的结果
exportfunctiongetAll(){
letall=[];
letopt={
method:'get',
url:'all/teacher',
success:res=>{
all=res.data.value||[];
},
fail:err=>{
tipInfo(err.data.desc,'提示',false,'warning');
}
};
$http(opt);
returnall;
}
console.log(getAll());//[]
$http是在axios基础进行封装的，是一个异步的方法，所以在组件中调用getAll()方法，拿到的是一个空数组
使用promise进行封装
exportfunctiongetAll(){
returnnewPromise((resolve,reject)=>{
letopt={
method:'get',
url:'all/teacher',
success:res=>{
resolve(res.data.value||[]);
},
fail:err=>{
reject(err.data.desc);
}
};
$http(opt);
});
}
//调用
getAll()
.then(data=>{
console.log(data);//
})
.catch(err=>{
this.tipInfo(err.data.desc,'提示',false,'warning');
});
使用promise进行封装后，方法，不够简洁，达不到优化的目的
使用回调函数进行封装
exportfunctiongetAll(callback){
letopt={
method:'get',
url:'all/teacher',
success:res=>{
callback(res.data.value||[]);
},
fail:err=>{
tipInfo(err.data.desc,'提示',false,'warning');
}
};
$http(opt);
}
//调用
getAllPark(data=>{
console.log(data);//成功拿到数据
});
补充知识：vue多个页面用到同一个接口的数据（比如名称列表），使用vuex
第一种：调接口不传参数
1、在store文件夹下的modules文件夹下新建getName.js
//getName.js
import{getNameList}from"@/apis/apis";//导入接口
exportdefault{
state:{
nameList:[]//名称列表
},
mutations:{
changeNameList(state,payload){
state.nameList=payload;
}
},
actions:{
geName(context){
getNameList({}).then(res=>{
if(res.code==0){
context.commit("changeNameList",res.data);
}else{
Message.error(res.message);
}
});
}
}
};
2、在store文件夹下index.js中引入getName.js
importgetNamefrom"./modules/getName";
exportdefaultnewVuex.Store({
modules:{
getName
},
});
3、在整个项目刚开始加载的时候就是用dispatch分发，这样就不管在哪个页面需要使用到都可以使用
比如打开页面首页的时候，在mounted里面就dispatch触发geName函数
第二种：调接口传参数
importmovieServicefrom'../services/movieService.js'
exportdefault{
namespaced:true,
state:{
current:1,
pageSize:2,
total:0,
datas:[],
isLoading:false
},
mutations:{//改变状态的通用方法设置整个状态
setState(state,newState){
for(constpropinnewState){
state[prop]=newState[prop]
}
}
},
actions:{
fetch(context){//根据当前的分页设置，获取电影
context.commit("setState",{isLoading:true})
movieService.getMovies(context.state.current,context.state.pageSize).then(resp=>{
console.log(resp)
context.commit("setState",resp)
context.commit("setState",{isLoading:false})
})
}
}
}
//在movieService.js
exportdefault{
asyncgetMovies(page,pageSize){
constdatas=awaitfetch("https://api.myjson.com/bins/15f8x1")
.then(resp=>resp.json())
return{
total:datas.length,
datas:datas.slice((page-1)*pageSize,page*pageSize)//返回分页的电影数据
}
},
//通过id获取电影数据
asyncgetMovie(id){
constdatas=awaitfetch("https://api.myjson.com/bins/15f8x1")
.then(resp=>resp.json())
returndatas.find(item=>item._id===id)
}
}
在页面使用：
mounted(){//远程获取数据
this.$store.dispatch("movie/fetch")//出发vuex中movie.js里的action，获取数据
},
以上这篇vue之封装多个组件调用同一接口的案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。