共计 893 个字符,预计需要花费 3 分钟才能阅读完成。
使用 axios.all 的情况
当一个页面连续调用的请求所需要的参数一致,并且在同一时间内请求时,可以考虑使用 axios.all。
具体使用可以看下面的例子:
// 首先把需要请求的接口放进 spread 中
let allPost = axios.all([this.$api.post(storeDailySale, params),
this.$api.post(storeSale, params),
this.$api.post(storeTopProduct, params),
]);
allPost.then(
// 为请求的接口取个别名。别名顺序不要求一一对应
axios.spread((storeSale, storeDailySale, storeTopProduct) => {
Toast.loading({
mask: true,
message: '加载中...'
});
// 销售图表渲染
if (Object.is(storeSale.data.code, 200) || Object.is(storeSale.data.code, 500)) {setTimeout(() => {Toast.clear();
}, 1000);
this.chartData = storeSale.data.result; // 销售报表趋势图
this.initChart(this.chartData); // 初始化图表
}
// 销售前 50
if (Object.is(storeTopProduct.data.code, 200)) {this.salesTop = storeTopProduct.data.result;}
// 销售汇总数据
if (Object.is(storeDailySale.data.code, 200)) {this.totalSales = storeDailySale.data.result[0];
}
this.startDate = start;
this.endDate = end;
})
)
优点:
同步调用接口,同步执行代码,减少代码量,清晰请求结构
缺点:
当其中某个接口报错,这几个同步执行的接口将不会在执行下去,导致页面空白。相当于一个报错,全部报错。
正文完