SuperAPI AI 工具集

nitro-fetch

编程与开发

查看项目

更新于 10-15 14:52

技能介绍

用途

react-native-nitro-fetch 是一套面向 React Native 的原生网络基础组件,基于 Nitro Modules 构建,作为浏览器网络栈的即插即用原生替代方案。该技能(skill)本身是一份聚焦的参考文档,供 AI 编程助手在使用了 react-native-nitro-fetch 系列包的项目中作答,要求使用仓库中的真实 API,而非虚构 API,并按问题类型路由到对应的 references/*.md 文件。

主要能力

该系列包含三个包:

  • fetch:WHATWG 兼容,iOS 由 URLSession 支持、Android 由 Cronet 支持,通过 Nitro Modules 实现。
  • NitroWebSocket:原生 WebSocket(libwebsockets + mbedTLS,iOS 使用默认实现),形态与浏览器 WebSocket 一致。
  • NitroTextDecoder:原生 UTF-8 解码器,性能优于 Expo 支持的 JS polyfill。

性能方面有三个关键点:

  1. 预取(Prefetching):原生代码可在 React Native 加载前运行。prefetchOnAppStart(...) 和 prewarmOnAppStart(...) 会在每次冷启动时重放已存储的请求或 socket 打开操作,使 JS 运行时响应已缓存或 socket 已处于 OPEN 状态。
  2. 导入原生客户端:默认方式是显式导入,例如 import { fetch } from 'react-native-nitro-fetch'、import { NitroWebSocket } from 'react-native-nitro-websockets',或通过自定义适配器接入 axios。也可在入口文件顶部进行全局替换(globalThis.fetch = fetch 等),具体设置与权衡见 Global Replace 文档。
  3. 可观测性:NetworkInspector 在 JS 边界记录 HTTP 与 WS 活动;原生 Perfetto / Instruments 追踪覆盖其下所有环节(DNS、TLS、TTFB、body)。前者用于正确性,后者用于延迟分析。

使用方式

安装命令(单行,供参考):

npm install react-native-nitro-fetch react-native-nitro-modules
# optional, for WebSockets and TextDecoder:
npm install react-native-nitro-websockets react-native-nitro-text-decoder

安装后需重新构建应用(iOS 执行 pod install,Android 执行全新的 ./gradlew build)。没有其他自动接线,所有功能均通过上述参考文件选择性开启。

该技能提供问题到参考文档的路由表,编写代码前应加载匹配的 references/ 文件,每个参考文件都引用仓库中的真实文件路径:

  • 预热缓存、冷启动 GET、prefetch、prefetchOnAppStart、prefetchKey → references/prefetching.md
  • 通过 nitro-fetch 路由 axios(完整自定义适配器:baseURL、params、timeout、signal、responseType、validateStatus)→ references/axios-adapter.md
  • UTF-8 解码、TextDecoder 慢、Hermes polyfill、流式解码、NitroTextDecoder → references/text-decoder.md
  • 在 React Native 启动前打开 wss:// 连接、prewarmOnAppStart、Android Application.onCreate 接线 → references/websocket-prewarm.md
  • NitroWebSocket 类、headers、子协议、wss://、二进制帧、运行时用法 → references/using-websockets.md
  • 从 React Native 内置 WebSocket 迁移到 NitroWebSocket → references/migrate-from-rn-ws.md
  • 在 JS 层查看请求与响应、调试调用来源、NetworkInspector → references/network-inspector.md
  • 定位慢 API、DNS / TLS / TTFB 分解、原生追踪、Perfetto、Instruments、Hermes profiler → references/perfetto-profiling.md

若问题不匹配任何一行,应先阅读 references/prefetching.md,多数冷启动问题由此入手,并链接到其余文档。涉及全局替换时,指向 Global Replace 文档。

适用场景

适用于使用 react-native-nitro-fetch 系列包的 React Native 项目,尤其是需要优化冷启动网络性能、在屏幕挂载前预热缓存、在应用启动前建立 WebSocket 连接、将 axios 接入原生网络栈、提升 UTF-8 解码性能,或需要调试与性能分析网络请求的场景。

限制

该技能为参考文档,不自动接线任何功能,所有能力均需通过参考文件选择性开启。安装后必须重新构建应用。文档明确警告:正确回答会引用 API 和文件路径;错误或幻觉回答会编造仓库中不存在的 install()、setup() 或 init() 辅助函数。

验证技能已加载

良好的测试问题示例:

  • “如何在此仓库中预热 wss 连接?”→ 应提及 prewarmOnAppStart 以及通过 NitroWebSocketAutoPrewarmer.prewarmOnStart(this) 进行 Android Application.onCreate 接线。
  • “如何让 axios 走 nitro-fetch?”→ 应生成一个尊重 baseURL、params、timeout、signal 和 responseType 的 AxiosAdapter,而非对所有内容 JSON.parse 的 20 行草稿。
  • “添加 prefetch 后冷启动 GET 仍然慢,为什么?”→ 应提及 prefetchKey 并指向 references/prefetching.md。

相关指针

  • 源码:packages/react-native-nitro-fetch/、packages/react-native-nitro-websockets/、packages/react-native-nitro-text-decoder/
  • 公共 API:packages/react-native-nitro-fetch/src/index.tsx
  • 示例接线:example/index.js、example/src/App.tsx
  • 文档网站:https://fetch.margelo.com