API-маршруты: +server.js

Не каждый адрес должен возвращать HTML-страницу. Мобильному приложению или скрипту на другом сайте нужны данные в формате JSON. Такие адреса — API-маршруты — в SvelteKit описывают в файле +server.js: он экспортирует функции с именами HTTP-методов.

Ответ на GET

Создайте папку src/routes/api/posts и в ней файл +server.js:

// src/routes/api/posts/+server.js
import { json } from '@sveltejs/kit';
import { getPosts } from '$lib/server/posts.js';
 
export function GET() {
  return json(getPosts());
}

Откройте http://localhost:5173/api/posts — браузер покажет массив статей в JSON. Функция json создаёт объект Response с нужным заголовком Content-Type. Можно вернуть и обычный new Response('текст') — это стандартный объект из Fetch API.

Параметры запроса

Функция получает объект события с полями url, params, request. Добавим поиск по строке ?q=:

// src/routes/api/posts/+server.js
import { json } from '@sveltejs/kit';
import { getPosts } from '$lib/server/posts.js';
 
export function GET({ url }) {
  const q = url.searchParams.get('q') ?? '';
  const posts = getPosts().filter((post) => post.title.toLowerCase().includes(q.toLowerCase()));
  return json(posts);
}

Адрес /api/posts?q=руны вернёт только статью «Что такое руны».

Приём данных: POST

Функция POST в том же файле принимает JSON и создаёт статью:

// src/routes/api/posts/+server.js (добавьте к GET)
import { error } from '@sveltejs/kit';
import { addPost } from '$lib/server/posts.js';
 
export async function POST({ request }) {
  const { title, body } = await request.json();
 
  if (!title) {
    error(400, 'Нужен заголовок');
  }
 
  const post = { slug: title.toLowerCase().replaceAll(' ', '-'), title, body };
  addPost(post);
 
  return json(post, { status: 201 });
}

Проверить можно из консоли браузера на странице сайта:

// консоль браузера на http://localhost:5173
const response = await fetch('/api/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'Третья статья', body: 'Текст' })
});
console.log(response.status, await response.json());

В консоли появятся код 201 и созданная статья, а на /blog после обновления — новый пункт списка.

Страница или API

Файлы +server.js и +page.svelte можно положить в одну папку: на GET-запрос браузера с заголовком Accept: text/html SvelteKit отдаст страницу, остальные запросы — в +server.js. Для ясности API обычно держат в отдельной папке src/routes/api.

Частая ошибка

Назвать функции с маленькой буквы: export function get(). SvelteKit ищет экспорт точно с именем метода заглавными буквами — GET, POST, PUT, PATCH, DELETE. Иначе на запрос придёт ошибка 405.