Axios-一次发出多个请求(vue.js) [英] Axios-Make multiple request at once (vue.js)

问题描述

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

How to make multiple requests in parallel using axios and vue ?

推荐答案

由于axios可以被React和Vue使用，因此它的代码几乎相同.

Since axios can be used by React and Vue it is pretty much the same code.

请务必阅读 axios文档，您可以从那里理解它.

Make sure to read axios docs, you can understand it from there.

无论如何，我将向您展示一个示例:

Anyway, I am going to show you an example:

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

和脚本:

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' })
    }
  }
}

这篇关于Axios-一次发出多个请求(vue.js)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！