如何使用axios和vue并行发出多个请求?

推荐答案

因为React和Vue可以使用axios,所以它的代码基本相同.

一定要读axios docs,你可以从那里理解.

不管怎样,我要给你们展示一个例子:

<template>
  <div>
   <button @click="make_requests_handler">Make multiple request</button>
   {{message}} - {{first_request}} - {{second_request}}
  </div>
</template>

还有 playbook :

import axios from 'axios'

export default {
  data: () => ({
    message: 'no message',
    first_request: 'no request',
    second_request: 'no request'
  }),
  methods: {
    make_requests_handler() {
      this.message = 'Requests in progress'

      axios.all([
        this.request_1(), //or direct the axios request
        this.request_2()
      ])
    .then(axios.spread((first_response, second_response) => {
          this.message = 'Request finished'
          this.first_request = 'The response of first request is' + first_response.data.message
          this.second_request = 'The response of second request is' + second_response.data.message
        }))
    },
    request_1() {
     this.first_request: 'first request began'
     return axios.get('you_URL_here')
    },
    request_2() {
      this.second_request: 'second request began'
      return axios.get('another_URL', { params: 'example' })
    }
  }
}

Vue.js相关问答推荐

VITE:无法为VUE单文件组件加载URL

如何防止Nuxt3重新加载时滚动跳到网页顶部

如何向 添加方法和 v-model?

我如何使用 vuejs 在我的 url 中编码一个令牌

如何在 A-La-Carte 系统中使用 vuetify 加载程序时导入 vuetify/lib

如何 for each 用户分组聊天消息?

如何只查看数组中的一个对象?

如何将 axios/axios 拦截器全局附加到 Nuxt?

为什么 Vue 路由/Webpack 开发服务器现在在页面刷新时显示无法获取/路径?

在组件的样式部分使用 Vue 变量

如何让 Vue (vue cli 3) 正确处理 GraphQL 文件?

如何异步验证 Vuetify 文本字段?

使用 nuxt,如何将路由名称放在页面标题中?

如何将事件绑定到 Vuetify 中的树视图 node ?

Vue如何将动态ID与v-for循环+字符串中的字段连接起来?

如何在 Vuetify DataTable 组件中设置初始每页行数值?

用于 nuxt.js 构建的自定义 index.html

Vue组件如何命名

如何在我的 vue js 中实现无限滚动

用于身份验证标头的 vue-resource 拦截器