Веб-стандарты

В этой документации вы встретите ссылки на стандартные Web API, поверх которых построен SvelteKit. Вместо изобретения велосипедов мы используем платформу, что означает применимость ваших существующих навыков веб-разработки. И наоборот — изучение SvelteKit сделает вас лучше как разработчика.

Эти API доступны во всех современных браузерах и многих небраузерных средах вроде Cloudflare Workers, Deno и Vercel Functions. Во время разработки и в адаптерах для Node-сред (включая AWS Lambda) они реализованы через полифиллы где это необходимо (хотя Node активно добавляет поддержку веб-стандартов).

Особое внимание стоит уделить следующим разделам:

Fetch API

SvelteKit использует fetch для получения данных из сети. Данный метод доступен в хуках, серверных роутах и браузере.

Заметка

Особая версия fetch доступна в load-функциях, серверных хуках и API-роутах для прямого вызова эндпойнтов при SSR без HTTP-запросов, с сохранением авторизации. (Для авторизованных запросов вне load нужно явно передавать заголовки cookie/authorization). Также позволяет делать относительные запросы, тогда как обычный fetch требует полный URL.

Помимо самого fetch, Fetch API включает:

Request

Экземпляр Request доступен в хуках и серверных роутах как event.request. Содержит методы вроде request.json() и request.formData() для получения отправленных данных.

Response

Экземпляр Response возвращается из await fetch(...) и обработчиков в +server.js. По сути, SvelteKit-приложение — это машина для преобразования Request в Response.

Headers

Интерфейс Headers позволяет читать входящие request.headers и устанавливать исходящие response.headers. Для удобства можно использовать функцию json, которая автоматически устанавливает правильные заголовки. Например:

JS

src/routes/what-is-my-user-agent/+server.js

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

/** @type {import('./$types').RequestHandler} */
export function GET({ request }) {
  // записываем все заголовки
  console.log(...request.headers);

  // создаем JSON Response, используя полученный заголовок
  return json({
    // получаем конкретный заголовок
    userAgent: request.headers.get('user-agent')
  }, {
    // устанавливаем заголовок ответа
    headers: { 'x-custom-header': 'potato' }
  });
}

TS

src/routes/what-is-my-user-agent/+server.ts

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

export const GET: RequestHandler = ({ request }) => {
  // записываем все заголовки
  console.log(...request.headers);

  // создаем JSON Response, используя полученный заголовок
  return json({
    // получаем конкретный заголовок
    userAgent: request.headers.get('user-agent')
  }, {
    // устанавливаем заголовок ответа
    headers: { 'x-custom-header': 'potato' }
  });
};

FormData

При работе с отправкой нативных HTML-форм вы будете иметь дело с объектами FormData.

JS

src/routes/hello/+server.js

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

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

  // выводим в консоль все поля
  console.log([...body]);

  return json({
    // получаем значение конкретного поля
    name: body.get('name') ?? 'world'
  });
}

TS

src/routes/hello/+server.ts

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

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

  // выводим в консоль все поля
  console.log([...body]);

  return json({
    // получаем значение конкретного поля
    name: body.get('name') ?? 'world'
  });
};

Stream API

В большинстве случаев ваши эндпойнты будут возвращать полные данные, как в примере с userAgent выше. Однако иногда может потребоваться вернуть ответ, который слишком велик для обработки в памяти целиком или доставляется частями. Для таких случаев платформа предоставляет потоки — ReadableStream, WritableStream и TransformStream.

URL API

URL представлены интерфейсом URL, который включает полезные свойства, такие как origin, pathname (и в браузере — hash). Этот интерфейс встречается в различных местах:

• event.url в хуках и серверных маршрутах
• page.url на страницах
• Параметры from и to в beforeNavigate и afterNavigate

URLSearchParams

При работе с URL вы можете получить доступ к параметрам запроса через url.searchParams, который является экземпляром URLSearchParams:

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

Web Crypto

Web Crypto API доступен через глобальный объект crypto. Он используется внутри SvelteKit для заголовков Content Security Policy (CSP), но вы также можете применять его для таких задач, как генерация UUID:

const uuid = crypto.randomUUID();