---
name: react-api-integration
when: '前端API调用, 接口对接, HTTP请求, axios, fetch, 数据请求, 接口联调, 后端对接, API集成, 请求封装'
scope:
  - frontend
products:
  - '*'
id: ka-pattern-react-api-integration
asset_kind: pattern
lifecycle_status: active
authority: supporting
routes:
  - '*'
primary_triggers:
  - 前端API调用
  - 接口对接
  - HTTP请求
  - axios
  - fetch
  - 数据请求
  - 接口联调
  - 后端对接
  - API集成
  - 请求封装
priority: P2
specificity: 3
version: 1.0.0
last_reviewed: '2026-05-22'
consumes: []
emits: []
secondary_triggers: []
negative_triggers: []
type: pattern
status: active
---

## 决策规则
- 必须通过 service 层封装 API 调用，禁止组件内直接写 axios.get/post
- 必须基于统一 axios 实例，统一处理 Token 注入和错误拦截
- 请求必须管理 loading 状态，禁止无反馈的静默请求
- 401 响应必须自动跳转登录页
- API URL 禁止硬编码，必须通过环境变量或统一 baseURL
- API 调用必须封装到独立的 service 层，禁止在组件中直接调用 axios/fetch
- API 层必须统一处理：Token 注入、错误拦截、响应解包、重试逻辑
- 请求取消必须使用 AbortController，组件卸载时取消未完成请求
- API 类型必须定义 Request/Response interface，禁止 any
- 并发请求必须使用 Promise.all / Promise.allSettled 批量处理

## 验收项
- [AC-01] API 调用通过 service 层，无组件内直接调用
- [AC-02] 请求有 loading 状态管理
- [AC-03] 401 响应自动跳转登录页
- [AC-04] 接口错误有用户提示
- [AC-05] API 封装到 service 层
- [AC-06] 组件卸载取消请求
- [AC-07] API 有 TypeScript 类型定义
