البيانات ومعالجات المسارات
قدّم عمليات النشر من app/api، واجلبها في صفحة وأرسل عمليات جديدة.
في هذا الفصل
- معالج المسار
- جلب البيانات في صفحة
- حالات التحميل والخطأ
- البث
يحتاج Acme Deploys إلى بيانات حقيقية. توجد معالجات المسارات بجوار صفحاتك في app/، وتستخدم واجهتَي الويب Request و Response، وتعمل عند تشغيل text dev و text start. تشترك مع التطبيق في المصدر نفسه، لذا لا تحتاج الطلبات إلى إعداد CORS.
معالج المسار
المضاف: 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()جلب البيانات في صفحة
اجلب البيانات داخل تأثير واعرض <Spinner> حتى تصل البيانات. يعيد r جلب البيانات؛ ويرسل n طلب نشر جديد، يظهر بحالة قيد البناء ويتحول إلى جاهز عند اكتمال البناء.
المحذوف: 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 أي خطأ تطرحه. كلاهما مكوّن عادي:
import { Spinner } from "@textjs/app";export default function Loading() { return <Spinner label="Loading deployments…" />;}البث
يمكن للمعالجات إرجاع ReadableStream، وبهذه الطريقة تُبث سجلات البناء إلى لوحة المعلومات سطرًا بسطر. راجع معالجات المسارات لمعرفة كيفية استخدام الأحداث المرسلة من الخادم وتمرير الطلبات عبر وكيل إلى خدمة محلية تعمل في الخلفية.
جرّبه
هذا تطبيق Acme Deploys في نهاية الفصل، يعمل في DevTools. انقر اللوحة، ثم استخدم المفاتيح أدناه.
فتح وحدة التحكم
يُعرض التطبيق في DevTools.فعّل أولًا «إظهار الميزات لمطوري الويب» في إعدادات Safari → متقدم. ثم انقر هنا واضغط r.
الفتح على حاسوب مكتبي
يُعرض هذا التطبيق في وحدة تحكم DevTools، التي تتطلب متصفحًا على حاسوب مكتبي.
اختبار
2 سؤالانأجب عن كل سؤال لإكمال الفصل.