React中如何在componentDidMount内使用Axios发起多个API请求

完全可以在componentDidMount生命周期中调用多个API，你可以根据接口是否有依赖关系选择以下两种实现方案：

首先你需要先扩展state，新增字段存储不同接口的返回数据，示例如下：

constructor(props) {
  super(props)
  this.state = {
    posts: [], // 原有日期范围接口数据
    users: [], // 第二个接口返回数据
    categories: [] // 第三个接口返回数据
  }
}

方案1：并行请求（无接口依赖时优先使用） #

适合多个接口之间没有参数依赖的场景，所有请求可以同时发起，性能更高，有两种常用写法：

写法1：独立发起、各自处理 #

每个请求单独处理返回结果，互不影响，单个请求失败不会阻塞其他请求的状态更新：

componentDidMount(){
  // 原有日期范围接口请求
  axios.get('http://127.0.0.1:8000/betweendays')
    .then(response => {
      this.setState({ posts: response.data })
    })
    .catch(err => console.error('日期范围接口请求失败：', err))

  // 第二个接口请求
  axios.get('http://127.0.0.1:8000/users')
    .then(response => {
      this.setState({ users: response.data })
    })
    .catch(err => console.error('用户接口请求失败：', err))

  // 更多接口以此类推
}

写法2：Promise.all统一处理 #

适合需要等所有接口全部返回成功后，再统一做后续操作的场景：

componentDidMount(){
  // 收集所有请求实例
  const reqPosts = axios.get('http://127.0.0.1:8000/betweendays')
  const reqUsers = axios.get('http://127.0.0.1:8000/users')
  const reqCategories = axios.get('http://127.0.0.1:8000/categories')

  Promise.all([reqPosts, reqUsers, reqCategories])
    .then(([resPosts, resUsers, resCategories]) => {
      // 所有请求成功后统一更新状态
      this.setState({
        posts: resPosts.data,
        users: resUsers.data,
        categories: resCategories.data
      })
    })
    .catch(err => {
      // 任意一个请求失败都会进入该捕获逻辑
      console.error('批量请求失败：', err)
    })
}

方案2：串行请求（接口有依赖时使用） #

适合后一个请求需要用到前一个请求返回参数的场景，比如第二个请求需要传入第一个接口返回的帖子ID，推荐用async/await写法逻辑更清晰：

async componentDidMount(){
  try {
    // 先请求第一个接口
    const postRes = await axios.get('http://127.0.0.1:8000/betweendays')
    this.setState({ posts: postRes.data })

    // 第二个请求依赖第一个接口返回的参数
    const userRes = await axios.get(`http://127.0.0.1:8000/users?postId=${postRes.data[0].id}`)
    this.setState({ users: userRes.data })

    // 更多依赖请求以此类推
  } catch (err) {
    console.error('串行请求出错：', err)
  }
}

注意事项 #

• 所有请求都建议添加错误捕获逻辑，避免单个接口异常导致页面报错
• 如果组件存在提前卸载的可能，建议搭配axios的CancelToken实现请求取消，避免内存泄漏

内容的提问来源于stack exchange，提问作者user16278360