vue之封装多个组件调用同一接口的方法
背景:项目中有多个组件调用同一接口,为提高代码可维护性,需要封装公共方法直接return 接口调用的结果export function getAll() {let all = [];let opt = {method: 'get',url: 'all/teacher',success: res => {all ...
·
背景:项目中有多个组件调用同一接口,为提高代码可维护性,需要封装公共方法
直接return 接口调用的结果
export function getAll() {
let all = [];
let opt = {
method: 'get',
url: 'all/teacher',
success: res => {
all = res.data.value || [];
},
fail: err => {
tipInfo(err.data.desc, '提示', false, 'warning');
}
};
$http(opt);
return all;
}
console.log(getAll()); // []
$http是在axios基础 进行封装的,是一个异步的方法,所以在组件中调用getAll()方法,拿到的是一个空数组
使用promise进行封装
export function getAll() {
return new Promise((resolve, reject) => {
let opt = {
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进行封装后,方法,不够简洁,达不到优化的目的
使用回调函数进行封装
export function getAll(callback) {
let opt = {
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); // 成功拿到数据
});
更多推荐
已为社区贡献14条内容
所有评论(0)