在 React Native 网络层封装的过程中，常见的痛点包括：

• 每次请求都要手动拼接 Token容易忘记或写错。
• 接口返回错误时需要在业务代码里重复处理，导致代码冗余。
• 网络超时没有统一处理，导致页面卡死或使用者体验差。
• Token 失效后刷新逻辑分散，容易出现并发刷新、请求丢失等问题。老实说，

把 Fetch / Axios超时请求/响应拦截器统一错误处理Token 刷新 等能力集中到一个 request 层。能够一次性解决以上所有痛点。

. Fetch vs Axios

If you are working on a medium‑to‑large RN project,I strongly recommend using Axios.

. Axios 基础封装

Pain point: 每个页面都要写相同的 baseURL、timeout、headers。把这些配置抽离到统一的 client 中，可避免重复。其实，

安装的观点是，

npm install axios
# or yarn add axios

再看目录结构示例。

src/
├── api/
│ ├── client.ts // Axios 实例
│ ├── user.ts // 业务接口
│ └── index.ts
├── storage/
│ └── token.ts // Token 本地存取
└── types/
└── api.ts // 请求/响应类型定义

import axios from 'axios';import { getAccessToken } from '../storage/token';export const http = axios.create({
baseURL: 'https://api.example.com'。timeout: 15000,// 15 秒超时
headers: {
'Content-Type': 'application/json',},});

. 请求拦截器

Pain point: 手动在每个接口里添加 Authorization Header，容易遗漏。

http.interceptors.request.use(
async config => {
const token = await getAccessToken;if {
config.headers.Authorization = `Bearer ${token}`;}
return config;},error => Promise.reject
);

. 响应拦截器

Pain point: 各页面 HTTP 状态码或错误码，导致错误处理不一致。话说回来，

import { ApiError } from '../types/api';http.interceptors.response.use(
response => response。async error => {
if {
const { status,data } = error.response;// ==== 常见错误统一映射 ====
if {
// Token 已失效 → 尝试刷新
return handleRefreshToken;}
if {
return Promise.reject);}
if {
return Promise.reject);}
} else if {
// ==== 超时 ====
return Promise.reject);} else if {
return Promise.reject);}
return Promise.reject;}
)，

. Token 刷新 & 并发请求排队方案

Pain point: 多个接口几乎同时返回 401 时如果每个都去刷新，会产生并发刷新、令牌冲突等问题。下面的实现确保一次只会触发一次刷新，其余请求排队等待新 token 再重新发送。说起来，

// tokenRefresh.ts
let isRefreshing = false;type PendingRequest = {
resolve: => void;reject: => void;}，const pendingQueue: PendingRequest =;async function refreshAccessToken: Promise {
const { data } = await http.post;return data.accessToken;}
async function handleRefreshToken {
if {
isRefreshing = true;try {
const newToken = await refreshAccessToken;// 更新本地存储
await setAccessToken;
 // 重放所有排队中的请求
pendingQueue.forEach);pendingQueue.length = 0;// 把原始请求重新发起一次
originalError.config.headers.Authorization = `Bearer ${newToken}`;return http，} catch {
pendingQueue.forEach);pendingQueue.length = 0;其实，// 刷新失败 → 清除登录状态。引导使用者重新登录
await clearAuthState;return Promise.reject;
} finally {
isRefreshing = false;老实说，}


} else {
// 已经有刷新任务进行中。将当前请求挂起等待结果
return new Promise => {
pendingQueue.push;})
.n => {
originalError.config.headers.Authorization = Bearer ${newToken};不过，return http;})，}
}

// 在响应拦截器中调用 handleRefreshToken


. Fetch 实现超时与拦截

Pain point: 原生 fetch 没有内置 timeout 与拦截器，需要自己封装才能达到统一管理的目标。
// request.ts
export async function request(
url这方面，string。options: RequestInit = {},timeoutMs: number = 15000,): Promise {
const controller = new AbortController;const timerId = setTimeout => controller.abort,timeoutMs);try {
// ----- 请求前拦截 -----
const token = await getAccessToken;const headers = new Headers;if headers.set;
 const response = await fetch(url。{
...options,headers,signal: controller.signal,});// ----- 响应后拦截 -----
if {
const errMsg = `HTTP ${response.status}`;throw new Error;}
const data = await response.json;return data，

} catch {
if {
throw new Error;按理说，}
throw err;} finally {
clearTimeout;}
}


L调用方式示例：


const user=await request;


. 推荐的完整架构图 


User Interface / Screen –> 调用业务 Hook / Query。

Busi ness Service –> 调用统一的 API 方法。

A xios Client –> 包含：


- Request Interceptor：注入 Access Token；可加入公共参数如 language、platform 等。

- Response Interceptor：统一错误转换；处理 Token 自动刷新；实现全局日志上报，话说回来，

- Timeout：Axios 内置；Fetch 使用 AbortController 包装。

- Cancelation：基于 CancelToken / AbortSignal，实现页面切换时自动取消。

- Retry 策略：对幂等 GET 请求进行指数退避重试。

- 全局错误类 ApiError：业务层通过 try/catch 捕获并决定 UI 展示方式。




至于使用示例，

// api/user.ts
export async function getUser{
const {data}=await http.get;return data，}


// screen/UserScreen.tsx
const {data。isLoading,error}=useQuery=>getUser);ifreturn;if{
// 不同 UI，例如 Toast、Modal…}
return;

. 小结 —— 为什么这样做能解决掉实际问题？


* 自动注入 Token* → 再也不用担心忘记 Authorization Header。老实说，

* 响应统一包装* → 所有页面只关心业务数据。不需要自己解析 statusCode 或 errorCode。

* 超时 + 自动取消* → 防止网络卡死，提高使用者体验。

* 集中式 Token 刷新 + 队列* → 防止并发刷新的“刷票”问题，保证所有待处理请求在拿到新 token 后重新发送。

* TypeScript 类型约束* → 开发阶段即能捕获参数或返回值错误，提高代码质量。

* 可配合 React Query / SWR* → 完全解耦 UI 与网络层，实现真正的职责分离。