Web 标准

在整个文档中，您会看到对 SvelteKit 构建在其之上的标准 Web API 的引用。我们没有重新发明轮子，而是使用平台，这意味着您现有的 Web 开发技能适用于 SvelteKit。相反，花时间学习 SvelteKit 将帮助您在其他地方成为更好的 Web 开发人员。

这些 API 在所有现代浏览器和许多非浏览器环境中都可用，如 Cloudflare Workers、Deno 和 Vercel Edge Functions。在开发过程中，以及在基于 Node 的环境（包括 AWS Lambda）的 适配器 中，它们在必要时通过多态填充程序提供（目前是这样——Node 正在迅速增加对更多 Web 标准的支持）。

特别是，您会熟悉以下内容

Fetch API永久链接

SvelteKit 使用 fetch 从网络获取数据。它在 钩子 和 服务器路由 以及浏览器中可用。

fetch 的特殊版本可在 load 函数、服务器钩子 和 API 路由 中使用，用于在服务器端渲染期间直接调用端点，而无需进行 HTTP 调用，同时保留凭据。（要在 load 之外的服务器端代码中进行凭据获取，必须显式传递 cookie 和/或 authorization 标头。）它还允许你进行相对请求，而服务器端 fetch 通常需要一个完全限定的 URL。

除了 fetch 本身，Fetch API 还包括以下接口

Requestpermalink

Request 的实例可以在 钩子 和 服务器路由 中作为 event.request 访问。它包含一些有用的方法，例如 request.json() 和 request.formData()，用于获取发布到端点的数据。

Responsepermalink

Response 的实例由 await fetch(...) 和 +server.js 文件中的处理程序返回。从根本上讲，SvelteKit 应用程序是一个将 Request 转换为 Response 的机器。

Headerspermalink

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' },
		},
	);
};

FormDatapermalink

在处理 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',
	});
};

流 APIpermalink

大多数情况下，你的端点将返回完整的数据，如上文中的 userAgent 示例。有时，你可能需要返回一个响应，该响应太大而无法一次性放入内存中，或者分块传递，为此，平台提供了 流 — ReadableStream、WritableStream 和 TransformStream。

URL APIpermalink

URL 由 URL 接口表示，其中包含有用的属性，如 origin 和 pathname（在浏览器中还有 hash）。此接口显示在各个地方——event.url 在 hooks 和 服务器路由 中，$page.url 在 页面 中，from 和 to 在 beforeNavigate 和 afterNavigate 中，依此类推。

URLSearchParams永久链接

无论在何处遇到 URL，都可以通过 url.searchParams 访问查询参数，它是 URLSearchParams 的一个实例

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

Web Crypto永久链接

可以通过 crypto 全局变量使用 Web Crypto API。它在内部用于 内容安全策略 头，但你也可以使用它来执行诸如生成 UUID 之类的事情

ts
const uuid = crypto.randomUUID();