在 Expo 项目中实现高效的网络请求与数据获取 #

解决 Expo 应用中网络请求碎片化的问题：通过统一的 fetch 封装、React Query 状态管理以及 SecureStore 安全认证，构建健壮的数据请求层。

为什么需要这个技能 #

在 Expo/React Native 开发中，简单的 fetch 调用往往无法满足生产需求。开发者经常面临以下挑战：

• 缺乏统一错误处理：直接调用 API 容易忽略 HTTP 状态码检查，导致应用崩溃。
• 状态同步困难：手动管理 Loading 和 Error 状态会导致代码冗余。
• 安全漏洞：将敏感的 Auth Token 存储在 AsyncStorage 中存在安全风险。
• 环境配置混乱：在开发环境和生产环境之间切换 API 地址时缺乏标准方案。

本技能通过一套标准的工作流，引导 AI 帮你构建具备缓存、重试、安全存储和环境隔离能力的网络层。

适用场景 #

• 基础 API 交互：实现标准的 GET/POST 请求并进行严格的错误拦截。
• 复杂状态管理：使用 React Query 处理数据缓存、自动刷新及请求去重。
• 身份验证流：使用 expo-secure-store 安全存储 Token 并实现自动刷新机制。
• 离线支持：结合 NetInfo 监听网络状态，实现离线缓存与请求暂停。
• 环境配置：利用 EXPO_PUBLIC_ 前缀环境变量管理多套 API 基础路径。

核心工作流 #

1. 构建底层 Fetch 封装：不使用 axios，优先使用 fetch 并封装 ApiError 类，确保所有响应都经过 response.ok 校验。
2. 集成状态管理库：引入 TanStack Query (React Query)，配置 staleTime 和 retry 策略，消除重复请求。
3. 实现安全认证：通过 expo-secure-store 读写 Token，并在请求拦截器中自动注入 Authorization 头部。
4. 配置环境变量：创建 .env.development 和 .env.production，使用 process.env.EXPO_PUBLIC_API_URL 动态适配。
5. 增强健壮性：引入 AbortController 处理组件卸载时的请求取消，并结合 NetInfo 处理网络断开场景。

下载和安装 #

下载 native-data-fetching 中文版 Skill ZIP

解压后将目录放入你的 AI 工具 skills 文件夹，重启工具后即可使用。具体路径参考内附的 USAGE.zh.md。

你可能还需要 #

暂无推荐