axios.all及Promise.all合并多个请求且都返回数据后进行其他操作

很多时候,我们需要同时向后端进行多个请求,当所有请求都返回数据后,再进行一些操作。比如:初始化页面时,可能需要初始化一些基础数据,才能进行操作。获取这些基础数据,可能需要向后端发送request1,request2。。。等多个请求,而后续的操作说需要request1,request2等都正确返回数据后才能进行。
在axios官方文档中对一次性并发多个请求示例如下:

function getUserAccount(){
  return axios.get('/user/12345');
}
function getUserPermissions(){
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
  .then(axios.spread(function(acct,perms){
    //当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果
  }))

但是很多时候,我们在项目中并不会直接去axios.get,axios请求可能都放在一个文件中,并且对加了拦截器等等。示例如下:

export const cargoDayNumber = (data) => {
  return axios.request({
    url: '/api/zz-xt/statistical/areas',
    method: 'post',
    data: data
  })
}

在vue文件中的使用如下:

let r1 = carVisitTime({ createTime: '2019-06-27' })
      let r2 = statistic({ createTime: '2019-06-27' })
      let r3 = cargoDayNumber({ createTime: '2019-07-01' })
      let r4 = enterpriseRanking()
      axios.all([r1, r2, r3, r4]).then(
        axios.spread((r1, r2, r3, r4) => {
          
          this.numberVehicleVisits = r1.data

          
          this.loadingDateRank.loading = r2.data.loading
          this.loadingDateRank.unloading = r2.data.unloading

         
          this.loadingAreasRank.loadingRegionalList = r3.data.inflow
          this.loadingAreasRank.unloadingRegionalList = r3.data.outflow

      
          this.enterpriseLoadWeight.enterpriseLoadingRankList = r4.data.loadingRank
          this.enterpriseLoadWeight.enterpriseUnloadingRankList = r4.data.unloadingRank
        })
      )

除了axios.all,我们也可以使用Promise.all,示例如下 

  Promise.all([p1, p2]).then(function(values) {
       console.log(values);//values为一个数组
       ///进行你的下一步操作
      });
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值