網路標準

在整個文件中，您會看到標準 網路 API 的參考，SvelteKit 建構在這些 API 之上。我們並未重新發明輪子，而是使用平台，這表示您現有的網路開發技能適用於 SvelteKit。反之，花時間學習 SvelteKit 將有助於您在其他地方成為更好的網路開發人員。

這些 API 可用於所有現代瀏覽器和許多非瀏覽器環境，例如 Cloudflare Workers、Deno 和 Vercel Edge Functions。在開發期間，以及在基於 Node 的環境（包括 AWS Lambda）的 適配器 中，它們會在必要時透過多重載入提供（目前是這樣，Node 正在快速增加對更多網路標準的支援）。

特別是，您將熟悉以下內容

取得 API永久連結

SvelteKit 使用 fetch 從網路取得資料。它可用於 掛勾 和 伺服器路由，以及瀏覽器。

在 load 函數、伺服器掛鉤 和 API 路由 中提供了一個 fetch 的特殊版本，用於在伺服器端渲染期間直接呼叫端點，而無需進行 HTTP 呼叫，同時保留憑證。（要在 load 之外的伺服器端程式碼中進行憑證取用，必須明確傳遞 cookie 和/或 authorization 標頭。）它還允許您進行相對請求，而伺服器端的 fetch 通常需要一個完全限定的 URL。

除了 fetch 本身，Fetch API 還包含以下介面

Request永久連結

可以在 掛鉤 和 伺服器路由 中透過 event.request 存取 Request 的實例。它包含有用的方法，例如 request.json() 和 request.formData()，用於取得傳送到端點的資料。

Response永久連結

await fetch(...) 和 +server.js 檔案中的處理常式會傳回 Response 的實例。從根本上來說，SvelteKit 應用程式是一個將 Request 轉換為 Response 的機器。

Headers永久連結

透過 Headers 介面，您可以讀取輸入的 request.headers 並設定輸出的 response.headers。例如，您可以如下所示取得 request.headers，並使用 json 便利函數 來傳送已修改的 response.headers

ts
import { json } from '@sveltejs/kit';

/** @type {import('./$types').RequestHandler} */
export function GET({ request }) {
	// log all headers
	console.log(...request.headers);

	// create a JSON Response using a header we received
	return json({
		// retrieve a specific header
		userAgent: request.headers.get('user-agent')
	}, {
		// set a header on the response
		headers: { 'x-custom-header': 'potato' }
	});
}

ts
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const GET: RequestHandler = ({ request }) => {
	// log all headers
	console.log(...request.headers);

	// create a JSON Response using a header we received
	return json(
		{
			// retrieve a specific header
			userAgent: request.headers.get('user-agent'),
		},
		{
			// set a header on the response
			headers: { 'x-custom-header': 'potato' },
		},
	);
};

FormData永久連結

在處理 HTML 原生表單提交時，您將使用 FormData 物件。

ts
import { json } from '@sveltejs/kit';

/** @type {import('./$types').RequestHandler} */
export async function POST(event) {
	const body = await event.request.formData();

	// log all fields
	console.log([...body]);

	return json({
		// get a specific field's value
		name: body.get('name') ?? 'world'
	});
}

ts
import { json } from '@sveltejs/kit';
import type { RequestHandler } from './$types';

export const POST: RequestHandler = async (event) => {
	const body = await event.request.formData();

	// log all fields
	console.log([...body]);

	return json({
		// get a specific field's value
		name: body.get('name') ?? 'world',
	});
};

串流 API永久連結

大多數時候，您的端點將傳回完整的資料，如上述 userAgent 範例。有時，您可能需要傳回一個過大而無法一次放入記憶體或分批傳送的回應，而平台會為此提供 串流 — ReadableStream、WritableStream 和 TransformStream。

URL API永久連結

URL 由 URL 介面表示，其中包含有用的屬性，例如 origin 和 pathname（以及在瀏覽器中的 hash）。此介面出現在各個地方 — 掛鉤 和 伺服器路由 中的 event.url、$page.url 中的 頁面、beforeNavigate 和 afterNavigate 中的 from 和 to 等。

URLSearchParams永久連結

無論何時遇到 URL，都可以透過 url.searchParams 存取查詢參數，而 url.searchParams 是 URLSearchParams 的實例

ts
const foo = url.searchParams.get('foo');

Web Crypto永久連結

Web Crypto API 可透過全域變數 crypto 取得。它在內部用於 內容安全政策 標頭，但你也可以使用它來執行產生 UUID 等工作

ts
const uuid = crypto.randomUUID();