Padrões da Web

Ao longo desta documentação, verás referências as APIs da Web padrão sobre as quais a SvelteKit constrói. No lugar de reinventar a roda, usamos a plataforma, o que significa que as tuas habilidades de desenvolvimento da web existente são aplicáveis a SvelteKit. Inversamente, noutro lado o tempo gasto aprendendo a SvelteKit ajudar-te-á a ser um programador da web melhor.

Estas APIs estão disponíveis em todos os navegadores modernos e em muitos ambientes sem navegador como Operários da Cloudflare, Deno e Funções de Borda da Vercel. Durante o desenvolvimento, e nos adaptadores para ambientes baseados na Node (incluindo AWS Lambda), são disponibilizadas através de supridores de recursos onde necessário (por agora, isto é — a Node está rapidamente a adicionar suporte para mais padrões da web).

Em particular, estarás confortável com os seguintes:

Fetch APIspermalink

A SvelteKit usa a fetch para receber dados a partir da rede. Está disponível nos gatilhos e bem como nas rotas do servidor no navegador.

Uma versão especial de fetch está disponível nas funções de load, gatilhos do servidor e rotas da API para invocar destinos diretamente durante a interpretação no lado do servidor, sem fazer uma chamada de HTTP, enquanto preserva as credenciais. (Para fazer requisições credenciadas no código do lado do servidor fora de load, deves passar explicitamente cabeçalhos de cookie e ou authorization). Isto também permite-te fazer requisições relativas, enquanto que a fetch do lado do servidor normalmente exige uma URL qualificada completamente.

Além da própria fetch, a API de Requisição inclui as seguintes interfaces:

Requestpermalink

Uma instância de Request é acessível nos gatilhos e rotas do servidor como event.request. Contém métodos úteis como request.json() e request.formData() para obter os dados que foram publicados para um destino.

Responsepermalink

Uma instância de Response é retornada a partir de await fetch(...) e manipuladores nos ficheiros +server.js. Fundamentalmente, uma aplicação de SvelteKit é uma máquina para tornar uma Request numa Response.

Headerspermalink

A interface de Headers permite-nos ler request.headers de entrada e definir response.headers de saída:

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

/** @type {import('./$types').RequestHandler} */
export function GET(event) {
	// registar todos os cabeçalhos
	console.log(...event.request.headers);

	return json({
		// recuperar um cabeçalho específico
		userAgent: event.request.headers.get('user-agent')
	});
}

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

export const GET: RequestHandler = (event) => {
	// registar todos os cabeçalhos
	console.log(...event.request.headers);

	return json({
		// recuperar um cabeçalho específico
		userAgent: event.request.headers.get('user-agent'),
	});
};

FormDatapermalink

Quando lidarmos com submissões de formulário nativas de HTML trabalharemos com os objetos de FormData.

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

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

	// registar todos os campos
	console.log([...body]);

	return json({
		// receber o valor dum campo específico
		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();

	// registar todos os campos
	console.log([...body]);

	return json({
		// receber o valor dum campo específico
		name: body.get('name') ?? 'world',
	});
};

Stream APIspermalink

Na maior parte do tempo, os nossos destinos retornarão dados completos, como no exemplo de userAgent acima. Algumas vezes, podemos precisar de retornar uma resposta que é grande demais para caber na memória em uma ida, ou é entregado em pedaços, e para isto a plataforma fornece os fluxos — ReadableStream, WritableStream e TransformStream.

URL APIspermalink

As URLs são representadas pela interface de URL, que inclui propriedades úteis como origin e pathname (e, no navegador, hash). Esta interface aparece em vários lugares — event.url nos gatilhos e rotas do servidor, $page.url nas páginas, from e to no beforeNavigate e afterNavigate e assim por diante.

URLSearchParamspermalink

Onde quer que encontrarmos uma URL, podemos acessar os parâmetros de consulta através de url.searchParams, que é uma instância de URLSearchParams:

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

Web Cryptopermalink

A API de Criptografia da Web está disponível através da global crypto. É usada internamente para os cabeçalhos de Política de Segurança de Conteúdo, mas também podemos usá-la para coisas como gerar UUIDs:

ts
const uuid = crypto.randomUUID();