vue中axios并发请求_axios 并行请求-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45845523/article/details/121138003

本文介绍如何在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>