React中如何将Axios请求组件的响应数据从父组件传给子组件

嘿，这个需求太典型了！我经常帮人做这种全应用复用的请求组件，既能统一管理请求逻辑，又能轻松处理加载状态，给你一套落地的实现方案，分分钟搞定！

核心设计思路 #

• 把请求逻辑封装成独立组件，作为父容器接收api地址、请求方法等基础配置
• 通过**插槽（Slot）**嵌套业务子组件，同时把「触发请求的方法」「加载状态」「响应/错误数据」传递给子组件
• 组件内部维护请求生命周期的状态：加载中、响应结果、错误信息，无需子组件重复处理

组件代码实现（以Vue 3为例，Vue 2/React可按需调整） #

<template>
  <div class="axios-request-wrapper">
    <!-- 全局加载遮罩 -->
    <div v-if="loading" class="spinner-overlay">
      <div class="spinner-circle"></div>
    </div>

    <!-- 插槽：把请求能力和状态暴露给子组件 -->
    <slot 
      :triggerRequest="triggerRequest" 
      :isLoading="loading" 
      :responseData="responseData" 
      :requestError="requestError"
    />
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref } from 'vue'

// 定义组件接收的props
const props = defineProps({
  apiUrl: {
    type: String,
    required: true
  },
  method: {
    type: String,
    default: 'POST',
    validator: val => ['GET', 'POST', 'PUT', 'DELETE'].includes(val.toUpperCase())
  }
})

// 内部状态管理
const loading = ref(false)
const responseData = ref(null)
const requestError = ref(null)

// 核心请求方法
const triggerRequest = async (requestParams = {}) => {
  loading.value = true
  requestError.value = null
  responseData.value = null

  try {
    // 根据请求方法处理参数（GET用params，POST/PUT用data）
    const requestConfig = {
      url: props.apiUrl,
      method: props.method.toUpperCase(),
      ...(props.method.toUpperCase() === 'GET' 
        ? { params: requestParams } 
        : { data: requestParams })
    }

    const res = await axios(requestConfig)
    responseData.value = res.data
    return res.data // 支持子组件通过await直接获取结果
  } catch (err) {
    requestError.value = err.response?.data?.message || '请求失败，请稍后重试'
    throw err // 抛出错误让子组件可以自定义处理
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spinner-circle {
  width: 40px;
  height: 40px;
  border: 4px solid #eee;
  border-top-color: #409eff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>

登录场景使用示例 #

把登录表单作为子组件嵌套进请求组件，直接调用暴露的请求方法即可：

<template>
  <AxiosRequestComponent apiUrl="/api/user/login" method="POST">
    <!-- 解构插槽传递的属性 -->
    <template v-slot="{ triggerRequest, isLoading, responseData, requestError }">
      <div class="login-form">
        <input v-model="username" placeholder="请输入用户名" />
        <input v-model="password" type="password" placeholder="请输入密码" />
        
        <button 
          @click="handleLogin" 
          :disabled="isLoading"
          class="login-btn"
        >
          {{ isLoading ? '登录中...' : '立即登录' }}
        </button>

        <!-- 错误提示 -->
        <div v-if="requestError" class="error-tip">{{ requestError }}</div>

        <!-- 登录成功反馈 -->
        <div v-if="responseData" class="success-tip">登录成功！欢迎回来 🎉</div>
      </div>
    </template>
  </AxiosRequestComponent>
</template>

<script setup>
import { ref } from 'vue'
import AxiosRequestComponent from './AxiosRequestComponent.vue'

const username = ref('')
const password = ref('')

const handleLogin = async () => {
  try {
    const loginRes = await triggerRequest({
      username: username.value,
      password: password.value
    })
    // 这里可以添加登录成功后的逻辑：比如存token、跳转首页
    localStorage.setItem('token', loginRes.token)
    router.push('/home')
  } catch (err) {
    // 也可以在这里做自定义错误处理，比如弹窗提示
    console.log('登录失败:', err)
  }
}
</script>

额外优化建议 #

• 可以给Axios添加全局拦截器，统一处理请求头（比如自动携带token）、全局错误（比如401跳登录页）
• 支持自定义加载动画：通过props传递加载组件或样式类，适配不同项目的UI风格
• 添加请求取消功能：用Axios的CancelToken防止重复提交，提升用户体验
• 如果是React项目，思路类似：用自定义Hook封装请求逻辑，通过Props把方法和状态传给子组件

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