Question

我正在使用axios获取一个React App。

此网址返回结果：

/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

在React Js中结合api获取HandleSubmit

1 个答案: