跳到主要内容

简述Vue中同时发送多个请求怎么操作?

参考答案:

在 Vue 中,你可以使用 axios 或者 fetch API 来发送 HTTP 请求。如果你需要同时发送多个请求,你可以使用 Promise.all() 方法。这个方法接受一个 promise 对象的数组作为参数,然后返回一个新的 promise 对象,这个新的 promise 对象会在所有输入的 promise 对象都成功解决后解决。

下面是一个简单的例子,演示了如何在 Vue 中同时发送多个请求:

<template>
  <div>
    <button @click="fetchData">获取数据</button>
    <div v-if="data1">数据1: {{ data1 }}</div>
    <div v-if="data2">数据2: {{ data2 }}</div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      data1: null,
      data2: null
    }
  },
  methods: {
    fetchData() {
      // 同时发送两个请求
      const promise1 = axios.get('https://api.example.com/data1')
      const promise2 = axios.get('https://api.example.com/data2')

      // 使用 Promise.all() 来等待所有请求完成
      Promise.all([promise1, promise2])
        .then(responses => {
          // responses 是一个数组,包含了每个 promise 的解决值
          this.data1 = responses[0].data
          this.data2 = responses[1].data
        })
        .catch(error => {
          // 如果任何一个请求失败,这里的 error 会被触发
          console.error(error)
        })
    }
  }
}
</script>

在这个例子中,当用户点击按钮时,fetchData 方法会被调用,然后同时发送两个 HTTP 请求。Promise.all() 会等待这两个请求都完成,然后在一个单独的 .then() 块中处理这两个请求的响应。如果任何一个请求失败,.catch() 块会被触发。

注意,虽然 Promise.all() 会在所有 promise 都解决后解决,但如果其中一个 promise 失败,Promise.all() 仍然会立即进入 .catch() 块,并且会将失败的原因作为参数传入。如果你希望即使其中一个请求失败,也能继续处理其他请求的结果,你可以使用 Promise.allSettled() 代替 Promise.all()