Skip to main content
SvelteKit入门指南

Web 标准

在本文档中，您会看到对 SvelteKit 所基于的标准 Web APIs 的引用。我们没有重新发明轮子，而是使用平台，这意味着您现有的 Web 开发技能可以应用到 SvelteKit。反之，花时间学习 SvelteKit 也会帮助您在其他地方成为更好的 Web 开发者。

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

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

Fetch APIs

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

在 load 函数、服务端 hooks和 API 路由中提供了一个特殊版本的 fetch，用于在服务端渲染期间直接调用端点，而无需进行 HTTP 调用，同时保留凭证。（要在 load 之外的服务端代码中进行带凭证的请求，您必须显式传递 cookie 和/或 authorization 头部。）它还允许您进行相对地址请求，而服务端的 fetch 通常需要一个完整的 URL。

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

Request

Request 的实例在 hooks 和服务端路由中可以通过 event.request 访问。它包含有用的方法，如 request.json() 和 request.formData()，用于获取发送到端点的数据。

Response

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

Headers

Headers 接口允许您读取传入的 request.headers 和设置传出的 response.headers。例如，您可以如下获取 request.headers，并使用 json 便捷函数 发送修改后的 response.headers：

src/routes/what-is-my-user-agent/+server
import { function json(data: any, init?: ResponseInit | undefined): Response
Create a JSON Response object from the supplied data.


@paramdata The value that will be serialized as JSON.
@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.
json } from '@sveltejs/kit';

/** @type {import('./$types').RequestHandler} */
export function 
function GET({ request }: {
    request: any;
}): Response
@type{import('./$types').RequestHandler}
GET({ request: anyrequest }) {
	// 记录所有头部
	var console: Console
The console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.


The module exports two specific components:


    

  • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
    • 

  • A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without calling require('console').
    • 



Warning: The global console object’s methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.


Example using the global console:


console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:


const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesource
console.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).


const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.


@sincev0.1.100
log(...request: anyrequest.headers);

	// 使用我们收到的头部创建 JSON Response
	return function json(data: any, init?: ResponseInit | undefined): Response
Create a JSON Response object from the supplied data.


@paramdata The value that will be serialized as JSON.
@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.
json(
		{
			// 获取特定头部
			userAgent: anyuserAgent: request: anyrequest.headers.get('user-agent')
		},
		{
			// 在响应中设置头部
			ResponseInit.headers?: HeadersInit | undefinedheaders: { 'x-custom-header': 'potato' }
		}
	);
}
import { function json(data: any, init?: ResponseInit | undefined): Response
Create a JSON Response object from the supplied data.


@paramdata The value that will be serialized as JSON.
@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.
json } from '@sveltejs/kit';
import type { 
type RequestHandler = (event: Kit.RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>
type RequestHandler = (event: Kit.RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>
RequestHandler } from './$types';

export const const GET: RequestHandlerGET: 
type RequestHandler = (event: Kit.RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>
type RequestHandler = (event: Kit.RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>
RequestHandler = ({ request: Request
The original request object


request }) => {
	// 记录所有头部
	var console: Console
The console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.


The module exports two specific components:


    

  • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
    • 

  • A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without calling require('console').
    • 



Warning: The global console object’s methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.


Example using the global console:


console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:


const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesource
console.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).


const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.


@sincev0.1.100
log(...request: Request
The original request object


request.Request.headers: Headers
Returns a Headers object consisting of the headers associated with request. Note that headers added in the network layer by the user agent will not be accounted for in this object, e.g., the “Host” header.


MDN Reference


headers);

	// 使用我们收到的头部创建 JSON Response
	return function json(data: any, init?: ResponseInit | undefined): Response
Create a JSON Response object from the supplied data.


@paramdata The value that will be serialized as JSON.
@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.
json(
		{
			// 获取特定头部
			userAgent: string | nulluserAgent: request: Request
The original request object


request.Request.headers: Headers
Returns a Headers object consisting of the headers associated with request. Note that headers added in the network layer by the user agent will not be accounted for in this object, e.g., the “Host” header.


MDN Reference


headers.Headers.get(name: string): string | null
MDN Reference


get('user-agent')
		},
		{
			// 在响应中设置头部
			ResponseInit.headers?: HeadersInit | undefinedheaders: { 'x-custom-header': 'potato' }
		}
	);
};

FormData

当处理 HTML 原生表单提交时，您将使用 FormData 对象。

src/routes/hello/+server
import { function json(data: any, init?: ResponseInit | undefined): Response
Create a JSON Response object from the supplied data.


@paramdata The value that will be serialized as JSON.
@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.
json } from '@sveltejs/kit';

/** @type {import('./$types').RequestHandler} */
export async function function POST(event: any): Promise<Response>
@type{import('./$types').RequestHandler}
POST(event: anyevent) {
	const const body: anybody = await event: anyevent.request.formData();

	// 记录所有字段
	var console: Console
The console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.


The module exports two specific components:


    

  • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
    • 

  • A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without calling require('console').
    • 



Warning: The global console object’s methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.


Example using the global console:


console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:


const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesource
console.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).


const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.


@sincev0.1.100
log([...const body: anybody]);

	return function json(data: any, init?: ResponseInit | undefined): Response
Create a JSON Response object from the supplied data.


@paramdata The value that will be serialized as JSON.
@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.
json({
		// 获取特定字段的值
		name: anyname: const body: anybody.get('name') ?? 'world'
	});
}
import { function json(data: any, init?: ResponseInit | undefined): Response
Create a JSON Response object from the supplied data.


@paramdata The value that will be serialized as JSON.
@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.
json } from '@sveltejs/kit';
import type { 
type RequestHandler = (event: Kit.RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>
type RequestHandler = (event: Kit.RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>
RequestHandler } from './$types';

export const const POST: RequestHandlerPOST: 
type RequestHandler = (event: Kit.RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>
type RequestHandler = (event: Kit.RequestEvent<Record<string, any>, string | null>) => MaybePromise<Response>
RequestHandler = async (event: Kit.RequestEvent<Record<string, any>, string | null>event) => {
	const const body: FormDatabody = await event: Kit.RequestEvent<Record<string, any>, string | null>event.RequestEvent<Record<string, any>, string | null>.request: Request
The original request object


request.Body.formData(): Promise<FormData>
MDN Reference


formData();

	// 记录所有字段
	var console: Console
The console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.


The module exports two specific components:


    

  • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
    • 

  • A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without calling require('console').
    • 



Warning: The global console object’s methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.


Example using the global console:


console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console class:


const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
@seesource
console.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).


const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format() for more information.


@sincev0.1.100
log([...const body: FormDatabody]);

	return function json(data: any, init?: ResponseInit | undefined): Response
Create a JSON Response object from the supplied data.


@paramdata The value that will be serialized as JSON.
@paraminit Options such as status and headers that will be added to the response. Content-Type: application/json and Content-Length headers will be added automatically.
json({
		// 获取特定字段的值
		name: FormDataEntryValuename: const body: FormDatabody.FormData.get(name: string): FormDataEntryValue | null
MDN Reference


get('name') ?? 'world'
	});
};

Stream APIs

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

URL APIs

URL 由 URL 接口表示，它包含有用的属性如 origin 和 pathname（在浏览器中还有 hash）。这个接口出现在各个地方 — hooks和服务端路由中的 event.url、页面中的 page.url、beforeNavigate 和 afterNavigate 中的 from 和 to 等。

URLSearchParams

无论在哪里遇到 URL，您都可以通过 url.searchParams 访问查询参数，它是 URLSearchParams 的实例：

const const foo: string | nullfoo = const url: URLurl.URL.searchParams: URLSearchParams
MDN Reference


searchParams.URLSearchParams.get(name: string): string | null
Returns the first value associated to the given search parameter.


MDN Reference


get('foo');

Web 加密

Web Crypto API 通过 crypto 全局对象提供。它在内部用于内容安全策略头部，但您也可以用它来做一些事情，比如生成 UUID：

const const uuid: `${string}-${string}-${string}-${string}-${string}`uuid = var crypto: Crypto
MDN Reference


crypto.Crypto.randomUUID(): `${string}-${string}-${string}-${string}-${string}`
Available only in secure contexts.


MDN Reference


randomUUID();

在 GitHub 编辑此页面

上一页 下一页
项目结构