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

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

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