为什么你的 fetch 总是写不对？

🎙 欢迎来到《前端达人 · 播客书单》第 27 期

今天我们聊一个所有前端人都会遇到的问题：

“我该怎么从接口拿数据？怎么把表单发给后端？要不要管类型？”

我们一起来拆解三个重点：

✅ 浏览器自带的 fetch() 怎么用？

✅ GET 和 POST 请求有什么区别？

✅ TypeScript 要不要验证后端数据类型？怎么做？

别担心，这期内容特别为小白设计：每一个知识点都有例子，有比喻，有踩坑提醒。

一、问题导入｜fetch 为什么你学了还总写错？

很多初学者第一次写接口请求，可能长这样：

fetch('/api/user');

但页面没有任何变化，控制台还报错：Unexpected token <这时候你可能就很困惑：

• 我不是已经请求了吗？为啥没用？
• 要不要 .json()？是同步还是异步？
• POST 请求怎么写？要加什么 header 吗？

其实这背后有几个关键细节：

fetch 是异步的！.json() 也是异步的！ POST 要设置 method、body 和 headers！

用点外卖打个比方：

• 你下单（fetch 请求）
• 餐厅接单（后端返回）
• 你要拆袋子（.json() 提取）
• 拿到的饭得确认是不是你点的菜（类型校验）

如果每一步都能做好，你的接口请求就成功了一大半！

二、核心定义｜fetch 到底是什么？

👉 一句话通俗解释：fetch 是浏览器给你的“网络通道”，让你能发 HTTP 请求，去服务器要数据或发数据。

👉 专业一点说：Fetch API 是基于 Promise 的异步请求方式，支持 GET、POST 等 HTTP 方法，用于取代传统的 XMLHttpRequest（XHR），并且语法更简洁、功能更灵活。

它可以做什么？

• 拉取用户信息（GET）
• 提交表单（POST）
• 修改数据（PUT）
• 删除记录（DELETE）

它的返回值是一个 **Promise<Response>**，里面有很多你要自己处理的“包装”。

三、使用方法｜GET 和 POST 到底怎么写？

✅ GET 请求（拿数据）

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

📌 要点说明：

• fetch(url) 发起请求
• await res.json() 提取响应的 JSON 数据

⛔ 如果你写成 res.json 而不是 res.json()，你拿到的是函数本身，页面会炸。

✅ POST 请求（发数据）

await fetch('https://api.example.com/register', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    username: '小明',
    age: 20
  })
});

📌 要点说明：

• method 必须设置为 'POST'
• headers 必须告诉后端你发的是 JSON
• body 必须是字符串（用 JSON.stringify()）

🔍 很多新手错在这：

body: { username: '小明' } // ❌ 错了！必须是字符串

四、原理讲解｜为什么需要 TypeScript 类型断言？

前端有个大坑：

你不能完全相信后端返回的数据。

比如你从 /api/user 拿回来一个用户对象：

const res = await fetch('/api/user');
const data = await res.json();
// 你以为 data 一定有 name？
alert(`你好，${data.name}`); // ❌ 可能报错！

你以为后端给你的是：

{ "name": "小明", "age": 20 }

但后端可能返回了：

{ "error": "未登录" }

💡 这时候 TypeScript 的类型断言函数就登场了！

👇 示例代码：

function assertIsUser(data: any): asserts data is User {
  if (
    typeof data !== 'object' ||
    typeof data.name !== 'string' ||
    typeof data.age !== 'number'
  ) {
    throw new Error('不是有效的用户对象');
  }
}

加了这个断言后，TS 就知道 data 是 User 类型，后面你用的时候就不怕属性不存在了！

五、实战应用｜实现一个“注册功能”的接口请求流程

来看一个完整的小例子：

type RegisterResult = { id: number; name: string };

function assertIsRegisterResult(data: any): asserts data is RegisterResult {
if (
    typeof data !== 'object' ||
    typeof data.id !== 'number' ||
    typeof data.name !== 'string'
  ) {
    thrownewError('注册结果结构错误');
  }
}

asyncfunction handleRegister() {
const res = await fetch('/api/register', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name: 'React新手' }),
  });

const data = await res.json();
  assertIsRegisterResult(data); // 🛡 类型断言
  alert(`注册成功！你的 ID 是 ${data.id}`);
}

📌 这是一个完整流程：

1. 发起 POST 请求
2. 设置请求头和 body
3. 拿到响应后 .json() 解析
4. 类型断言校验数据
5. 页面展示结果 ✅

六、易错点总结｜这几个坑你中招了吗？

七、总结复盘｜本节你收获了什么？

🧠 核心知识点：

✅ fetch 的 GET 与 POST 正确写法

✅ .json() 是异步函数，必须 await

✅ POST 请求必须设置 headers + stringify

✅ TypeScript 的类型断言函数超好用

✅ 提前识别常见新手坑，开发更安心