网络请求

这一课你将能做到

1. 用 fetch 和 axios 完成 GET / POST 请求，并说清楚 fetch 不抛 HTTP 错误这个坑
2. 封装统一请求层：baseURL、超时、token 注入、响应剥壳、401 处理
3. 实现标准的 loading / error / 空数据三态界面，完成图片上传和请求取消

为什么要学

没有网络的 App 只是本地玩具。登录、列表、下单、上传头像，全是网络请求。而且「你们项目怎么封装 axios」是面试必问题——这一课就是标准答案。裸写 fetch 也能跑，但项目里这么干，token 注入、错误处理、loading 管理会在几十个页面里复制粘贴，迟早乱套。

人话：每个页面裸写 fetch，就像每家每户自己去河边打水——迟早乱套。封装统一请求层，相当于给小区通自来水：家家拧开龙头就有水（自动带 token），停水了统一通知（统一错误处理），水表统一计费（统一日志）。

先建立图像

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then((res) => res.json())
  .then((data) => console.log(data.title));

一次请求的三个阶段，对应界面的三种状态——这个「三态」模型会贯穿你所有的列表页：

发起请求 → loading = true  → 界面：转圈
请求成功 → setList(data)   → 界面：渲染数据（空数组还要显示「暂无数据」）
请求失败 → setError(true)  → 界面：错误提示 + 重试按钮

跟着做

步骤 1：fetch 基本用法与它的天坑

// GET
const res = await fetch('https://api.example.com/users');
const data = await res.json();

// POST JSON
const res2 = await fetch('https://api.example.com/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ username: 'tom', password: '123456' }),
});

天坑：fetch 遇到 404 / 500 不会抛错。它只在网络彻底断开时才 reject，HTTP 错误状态码照样走 then。所以用 fetch 必须自己判断：

const res = await fetch(url);
if (!res.ok) throw new Error(`HTTP ${res.status}`);  // 不抛就等着把 404 当成功处理
const data = await res.json();

这一行判断就是大家宁愿用 axios 的核心原因之一——axios 对非 2xx 直接 reject。

步骤 2：封装 axios 实例（面试标准答案）

npx expo install axios @react-native-async-storage/async-storage

// utils/request.js
import axios from 'axios';
import AsyncStorage from '@react-native-async-storage/async-storage';

const request = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,   // 10 秒超时，弱网兜底
});

// 请求拦截器：每次请求自动注入 token
request.interceptors.request.use(async (config) => {
  const token = await AsyncStorage.getItem('token');
  if (token) config.headers.Authorization = `Bearer ${token}`;
  return config;
});

// 响应拦截器：统一剥壳 + 统一错误处理
request.interceptors.response.use(
  (res) => res.data,  // 业务层直接拿到 data，少写一层 .data
  (err) => {
    if (err.response?.status === 401) {
      // token 失效：清登录态、跳登录页（通过全局事件或 NavigationRef 通知外层）
    }
    return Promise.reject(err);
  }
);

export default request;