TypeScript Academy · 课时

数据获取与操作类型

Q: 「数据获取与操作类型」这节课中我会学到什么？

在服务器端获取带类型的 JSON 数据，控制缓存和重新验证，并为表单和数据变更创建带类型的服务器操作。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在服务器端获取带类型的 JSON 数据，控制缓存和重新验证，并为表单和数据变更创建带类型的服务器操作。

第 2 / 3 课8 个步骤

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

简介

目标：在服务器组件中获取带类型的 JSON 数据，配置缓存与重新验证，并构建用于变更操作的带类型服务器操作。

带类型的获取辅助函数
缓存：重新验证与不存储
使用表单的服务器操作

带类型的获取辅助函数

创建一个小型的 json<T> 辅助函数，用于解码响应，并在响应状态不是 200 时抛出错误。使用 重新验证实现类似 ISR 的缓存。

// app/lib/http.ts
export async function json<T>(res: Response): Promise<T> {
  if (!res.ok) throw new Error(`HTTP ${res.status}`)
  return (await res.json()) as T
}

// app/page.tsx (server)
export type Post = { id: number; title: string }

export default async function Page() {
  const res = await fetch("https://example.com/api/posts", { next: { revalidate: 60 } })
  const posts = await json<Post[]>(res)
  return (
    <main style={{ display: "grid", gap: 8 }}>
      <h1>Posts</h1>
      <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>
    </main>
  )
}

缓存控制

对于完全动态的请求，使用 cache: "no-store"；或者使用 next.revalidate，在 N 秒后重新生成。

// app/page.tsx (server)
export default async function Page() {
  const res = await fetch("https://example.com/api/now", { cache: "no-store" })
  const data = await res.json() as { now: string }
  return <pre>{JSON.stringify(data, null, 2)}</pre>
}

// Alternative: revalidate per request
// fetch(url, { next: { revalidate: 5 } })

服务器操作模块

在模块中（或函数内部）添加 "use server"。服务器操作在服务器上运行，可以调用仅限服务器端的 API，然后调用 revalidatePath。

// app/actions.ts
"use server"
import { revalidatePath } from "next/cache"

export async function createPost(form: FormData): Promise<{ id: string }> {
  const title = String(form.get("title") || "")
  if (!title) throw new Error("title required")
  // pretend DB insert
  const id = Math.random().toString(36).slice(2)
  revalidatePath("/")
  return { id }
}

使用操作的客户端表单

将服务器操作绑定到表单的 action。使用 useTransition 显示等待中的界面。类型会从操作签名中传递下来。

"use client"
import { useTransition } from "react"
import { createPost } from "../actions"

export default function NewPost() {
  const [pending, start] = useTransition()

  const onSubmit = async (formData: FormData) => {
    await createPost(formData)
  }

  return (
    <form action={(fd) => start(() => onSubmit(fd))} style={{ display: "grid", gap: 8 }}>
      <input name="title" placeholder="Title" />
      <button disabled={pending}>{pending ? "Creating…" : "Create"}</button>
    </form>
  )
}

提示与安全

提示：

涉及机密信息时，优先在服务器上获取数据，再将结果作为属性传递。
从服务器操作中抛出带类型的错误，并在界面中通过边界处理。
变更操作后，重新验证受影响的路径。

服务器操作类型检查

快速检查：如何将函数标记为服务器操作并保留类型？

在交互式课程中回答

回顾

回顾：使用带类型的辅助函数解码 JSON，明智地选择 no-store 或 revalidate，并使用带类型的服务器操作安全地执行变更和重新验证。

免费开始

用 AI 导师学习 TypeScript — 免费

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

课程: 101
课程: 352

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

常见问题解答

「数据获取与操作类型」课时是免费的吗？

是的 — 「数据获取与操作类型」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 3 节课。

「数据获取与操作类型」这节课中我会学到什么？

在服务器端获取带类型的 JSON 数据，控制缓存和重新验证，并为表单和数据变更创建带类型的服务器操作。你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

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

「数据获取与操作类型」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 TypeScript Academy