javascript - 在React Js中结合HandleSubmit的api get

Question

我正在 React 应用程序中使用 axios get。

此网址返回结果:

/api/search/occupation/Doctor

这也会返回结果

/api/search/gender/male

如何结合两者？

这是我的提交句柄:

import React, { Component } from 'react'
import { get } from 'axios'
...
...


  handleSubmit(event) {
event.preventDefault()
get(`/api/search/gender/${this.state.formValues.gender}`)
.then((res) => {
  console.log(res.data)
  if (res.status === 200) {
    this.setState({
      data: res.data
    })
  }
})


}

更新

我试图获得一个响应，但得到了 RefereceError

      handleSubmit(event) {
    event.preventDefault()
    axios.all([
      axios.get(`/api/search/gender/${this.state.formValues.gender}`),
      axios.get(`/api/search/occupation/${this.state.formValues.occupation}`)
    ])
    .then(axios.spread(function (gender, religion) {
      var genderData = gender.data || []
      var occupationData = occupation.data || []
      var userData = genderData.concat(occupationData)
      that.setState({ userData: userData })
    }))
    .catch(error => console.log(error))
  }

Answer 1

您可以并行发送两个请求，然后在两个请求得到解决后更新状态。

handleSubmit(event) {
 const promise1= axios.get('api1');
 const promise2= axios.get('api2');
 Promise.all([promise1, promise2]).then(response => {
   // Update the state using response[0] and response[1]
 })
}

另请注意，如果第二个 API 请求依赖于第一个 API 请求的响应，则不能使用 Promise.all