axiosall使用注意事件

使用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;
  })
)

优点：
同步调用接口，同步执行代码，减少代码量，清晰请求结构

缺点：
当其中某个接口报错，这几个同步执行的接口将不会在执行下去，导致页面空白。相当于一个报错，全部报错。