vue中axios并发请求

本文介绍如何在Vue项目中利用axios.all()和axios.spread()实现多个异步请求的批量处理,确保所有请求完成后才执行后续逻辑。通过具体代码示例展示了如何发起并处理这些请求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue中的axios跨域是异步执行。
想要多个请求全部完成后再执行后面的逻辑可以使用**axios.all()**、**axios.spread()**
<template>
  <div class="Test">
    <el-button @click="get_button">点击</el-button>
  </div>
</template>

<script>
export default {
  name: 'Test',
  components: {
  },
  mounted () {
  },
  methods: {
    get_one_axios () {
      let that = this
      return that.$axios({
        url: '/api/userInfo/getallusername',
        method: 'get'
      })
    },
    get_two_axios () {
      let that = this
      return that.$axios({
        url: '/display/product-statistic-query/module/production-yield-info-by-work-order-id',
        method: 'get',
        params: {
          workOrderId: '19440060'
        }
      })
    },
    get_three_axios () {
      let that = this
      return that.$axios({
        url: '/display/trend-chart/warning-statistic-daily',
        method: 'get',
        params: {
          startTime: '2021-06-02 00:00:00',
          endTime: '2021-06-08 00:00:00',
          classification: '模块工位良率'
        }
      })
    },
    get_button () {
      let that = this
      that.$axios.all([that.get_one_axios(), that.get_two_axios(), that.get_three_axios()]).then(that.$axios.spread(function (res1, res2, res3) {
        console.log('完成')
        console.log('res1:', res1)
        console.log('res2:', res2)
        console.log('res3:', res3)
      }))
    }
  },
  data () {
    return {
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>

运行:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值