vue项目一个页面接口很多怎么写_vue之封装多个组件调用同一接口的案例

背景：项目中有多个组件调用同一接口，为提高代码可维护性，需要封装公共方法

直接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.