SvelteKit翻译教程——WEB标准

385 阅读2分钟

在本文档中,您将看到对 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 示例所示。有时,您可能需要返回一个太大而无法一次性放入内存的响应,或者以块的形式传递的响应,为此平台提供了流 - ReadableStreamWritableStreamTransformStream。URL 由 URL 接口表示,其中包括有用的属性,如来源和路径名(以及在浏览器中的哈希值)。这个接口出现在不同的地方——钩子和服务器路由中的 event.url,页面中的 $page.urlbeforeNavigateafterNavigate 中的 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();