在本文档中,您将看到对 SvelteKit 构建的标准 Web API 的引用。我们不是重新发明轮子,而是使用该平台,这意味着您现有的Web开发技能适用于SvelteKit。相反,花在学习SvelteKit上的时间将帮助您在其他地方成为更好的Web开发人员。
这些API在所有现代浏览器和许多非浏览器环境中可用,如Cloudflare Workers,Deno和Vercel Edge Functions。在开发过程中,以及在基于节点的环境(包括AWS Lambda)的适配器中,必要时可以通过polyfills提供它们(目前,Node正在迅速增加对更多Web标准的支持)。
特别是,您将熟悉以下内容:
Fetch APIs
SvelteKit用于 fetch 从网络获取数据。它在钩子和服务器路由以及浏览器中可用。
函数、服务器钩子和 API 路由中
load提供了一个特殊版本的用于在服务器端渲染期间直接调用,而无需进行 HTTP 调用,fetch同时保留凭据。(要在服务器端代码外部load进行凭证获取,您必须显式传递cookie和/或authorization标头。它还允许您发出相对请求,而服务器端fetch通常需要完全限定的 URL。
除了 fetch 自身之外,Fetch API 还包括以下接口:
Request
Request 实例可在钩子和服务器路由中以 的形式 event.request 访问。它包含有用的方法,例如 request.json() 和 request.formData() 获取发布到端点的数据。
Response
Response 的实例从 await fetch(...) 和 +server 中的处理程序返回 .js 文件。从根本上来说,SvelteKit 应用程序是将请求转化为响应的机器。
Headers
Headers 接口允许您读取传入的 request.headers 并设置传出的 response.headers。例如,您可以获取如下所示的 request.headers,并使用 json 便利函数发送修改后的 response.headers:
import { json } from '@sveltejs/kit';
/** @type {import('./$types').[RequestHandler](https://kit.svelte.dev/docs/types#public-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' }
});
}
FormData
在处理 HTML 本机表单提交时,您将使用 FormData 对象。
import { json } from '@sveltejs/kit';
/** @type {import('./$types').[RequestHandler](https://kit.svelte.dev/docs/types#public-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'
});
}
Stream APIs
大多数时候,您的端点将返回完整的数据,如上面的 userAgent 示例所示。有时,您可能需要返回一个太大而无法一次性放入内存的响应,或者以块的形式传递的响应,为此平台提供了流 - ReadableStream、WritableStream 和 TransformStream。URL 由 URL 接口表示,其中包括有用的属性,如来源和路径名(以及在浏览器中的哈希值)。这个接口出现在不同的地方——钩子和服务器路由中的 event.url,页面中的 $page.url,beforeNavigate 和 afterNavigate 中的 from 和 to 等等。
URL APIs
URL 由 URL 接口表示,其中包括有用的属性,如来源和路径名(以及在浏览器中的哈希值)。这个接口出现在不同的地方——钩子和服务器路由中的 event.url,页面中的 $page.url,beforeNavigate 和 afterNavigate 中的 from 和 to 等等。
URLSearchParams
无论在哪里遇到 URL,都可以通过 访问 url.searchParams 查询参数,这是 的 URLSearchParams 实例:
const foo = url.searchParams.get('foo');
Web Crypto
Web Crypto API 通过 crypto 全局提供。它在内部用于内容安全策略标头,但您也可以将它用于生成 UUID 等操作:
const uuid = crypto.randomUUID();