資料與路由處理常式
從 app/api 提供部署資料，在頁面中擷取並以 POST 新增。
本章內容
- 路由處理常式
- 在頁面中擷取資料
- 載入與錯誤狀態
- 串流
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 會透過 POST 新增部署，狀態起初顯示為建置中，建置完成後轉為就緒。
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 個問題回答所有問題以完成本章。