数据与路由处理程序
从 app/api 提供部署数据，在页面中获取并提交新部署。
本章内容
- 路由处理程序
- 在页面中获取数据
- 加载和错误状态
- 流式传输
Acme Deploys 需要真实数据。路由处理程序与页面放在同一个 app/ 目录中，使用 Web Request 和 Response API，并在 text dev 和 text start 下运行。路由处理程序与应用同源，因此请求无需配置 CORS。
路由处理程序
app/api/deployments/route.ts+10ts
新增：import { DEPLOYMENTS, createDeployment } from "../../../lib/deployments";新增：新增：export function GET(): Response {新增： return Response.json(DEPLOYMENTS);新增：}新增：新增：export async function POST(req: Request): Promise<Response> {新增： const deployment = createDeployment(await req.json());新增： return Response.json(deployment, { status: 201 });新增：}在 text dev 运行时，从控制台提示符调用：
await (await fetch("/api/deployments")).json()在页面中获取数据
在 effect 中获取数据，并在数据到达前显示 <Spinner>。r 重新获取数据；n 提交一个新部署，初始显示为构建中，构建完成后变为就绪。
app/deployments/page.tsx+21-2tsx
移除：import { DEPLOYMENTS } from "../../lib/deployments";新增：import { useEffect, useState } from "react";新增：import { Spinner, useInput } from "@textjs/app";新增：import type { Deployment } from "../../lib/deployments";export default function DeploymentsPage() {新增： const [rows, setRows] = useState<Deployment[]>([]);新增： const [loading, setLoading] = useState(true);新增：新增： const refetch = async () => {新增： setLoading(true);新增： setRows(await (await fetch("/api/deployments")).json());新增： setLoading(false);新增： };新增： useEffect(() => void refetch(), []);新增：新增： useInput((e) => {新增： if (e.input === "r") void refetch();新增： if (e.input === "n") void fetch("/api/deployments", { method: "POST", body: "{}" }).then(refetch);新增： });新增：新增： if (loading) return <Spinner label="Loading deployments…" />; return ( <Box className="flex-col">移除： {DEPLOYMENTS.map((d) => (新增： {rows.map((d) => ( <Box key={d.id} className="flex-row h-1 gap-2">新增： <Status status={d.status} /> …加载和错误状态
无需手动处理 loading，页面挂起时会显示同目录下的 loading.tsx，而 error.tsx 会捕获页面抛出的所有错误。两者都是普通组件：
app/deployments/loading.tsxtsx
import { Spinner } from "@textjs/app";export default function Loading() { return <Spinner label="Loading deployments…" />;}流式传输
处理程序可以返回 ReadableStream，构建日志就是这样逐行流入仪表盘的。有关服务器发送事件和代理本地守护进程的说明，请参阅路由处理程序。
试用
这是本章结束时的 Acme Deploys，正在 DevTools 中运行。点击输入区，然后使用下列按键。
▼ 06 · 数据与路由处理程序
打开控制台
⌘⌥J
CtrlShiftJ
⌘⌥K
CtrlShiftK
⌘⌥C
应用在 DevTools 中渲染。先在 Safari 设置 → 高级中开启“显示网页开发者功能”。 然后点击这里并按 r。
在桌面端打开
此应用在 DevTools 控制台中渲染，需要桌面浏览器。
测验
2 个问题回答所有问题以完成本章。