TypeScript Academy · 课时

使用泛型包装器为 Fetch 响应添加类型

Q: 「使用泛型包装器为 Fetch 响应添加类型」这节课中我会学到什么？

编写返回安全类型的带类型 fetch 辅助函数 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

编写返回安全类型的带类型 fetch 辅助函数

第 1 / 4 课13 个步骤

使用泛型包装器为 Fetch 响应添加类型 是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

欢迎

编写带类型的 fetch 辅助函数，以安全地使用 HTTP API。

fetch 的问题

fetch API 返回 Promise。没有类型后，您将失去所有安全保障。

const res = await fetch('/api/user');
const data = await res.json(); // data: any — unsafe

泛型 fetch 包装器

创建带类型的 fetch 辅助函数，并假定响应的结构。

async function fetchJson<T>(url: string): Promise<T> {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`HTTP error: ${res.status}`);
  return res.json() as Promise<T>;
}

使用包装器

使用显式类型参数调用包装器。

interface User { id: number; name: string; }
const user = await fetchJson<User>('/api/users/1');
console.log(user.name); // typed as string

添加错误处理

扩展包装器，使其返回结果类型。

async function safeFetch<T>(url: string): Promise<Result<T>> {
  try {
    const res = await fetch(url);
    if (!res.ok) return err(new Error(`HTTP ${res.status}`));
    return ok(await res.json() as T);
  } catch (e) { return err(e as Error); }
}

请求选项类型

为 POST/PUT 请求设置 fetch 选项的类型。

async function postJson<T, B>(url: string, body: B): Promise<T> {
  const res = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  });
  return res.json() as Promise<T>;
}

响应验证

返回带类型的值之前，先验证响应结构。

AbortController 类型

为可取消的请求设置 AbortController 和 AbortSignal 的类型。

const ctrl = new AbortController();
const data = await fetchJson<User>('/api/users/1', { signal: ctrl.signal });
setTimeout(() => ctrl.abort(), 5000);

基础 URL 拦截器

创建带有基础 URL 的 HTTP 客户端类。

class ApiClient {
  constructor(private baseUrl: string) {}
  get<T>(path: string): Promise<T> {
    return fetchJson<T>(`${this.baseUrl}${path}`);
  }
}

带类型的请求头

为请求头和响应头设置类型。

const headers: Record<string, string> = {
  Authorization: `Bearer ${token}`,
  'Content-Type': 'application/json',
};

分页类型

为分页 API 响应设置类型。

interface Paginated<T> { data: T[]; page: number; total: number; }
const result = await fetchJson<Paginated<User>>('/api/users?page=1');

快速检查

在带类型的 fetch 包装器中，`res.json() as Promise` 的作用是什么？

在交互式课程中回答

回顾

使用泛型包装器为 Fetch 响应设置类型：您已经掌握了关键概念和模式。

免费开始

用 AI 导师学习 TypeScript — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 101
课程: 352

免费开始学习查看完整课程

常见问题解答

「使用泛型包装器为 Fetch 响应添加类型」课时是免费的吗？

是的 — 「使用泛型包装器为 Fetch 响应添加类型」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「使用泛型包装器为 Fetch 响应添加类型」这节课中我会学到什么？

编写返回安全类型的带类型 fetch 辅助函数你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「使用泛型包装器为 Fetch 响应添加类型」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 TypeScript Academy