Обработка запросов

Каждый файл layout.ts и index.ts внутри каталога src/routes имеет возможность доступа к текущему HTTP-запросу, ответу и URL-адресу. Это позволяет вам получать и изменять данные, и даже отвечать пользовательским контентом.

Qwik City реализует систему промежуточного программного обеспечения, основанную на иерархии каталога src/routes. Система промежуточного ПО используется для обработки HTTP-запросов и ответов и доступна для страниц, макетов и конечных точек.

Каждый маршрут может добавлять обработчики HTTP-запросов и ответов, что позволяет разработчикам получать и изменять данные. Обработчики также могут использоваться конечными точками, которые возвращают только данные, а не HTML-код страницы.

Эта возможность позволяет вам обрабатывать любое событие запроса, иметь побочные эффекты в конвейере запроса непосредственно перед рендерингом компонента и отвечать на него выбранным содержимым. Возможность доступна для маршрутов страниц, макетов и конечных точек, но не для обычных компонентов.

Обработчики запросов и ответов

На страницах, макетах и конечных точках мы можем получить доступ к данным запроса реализуя функции обработчика запроса, такие как onGet, onPost, onPut и т.д. Эти функции выполняются в зависимости от HTTP-метода, используемого для данного маршрута.

Кроме того, функция onRequest может быть использована для обработки любого метода запроса, а не конкретного, в виде middleware. Например, если объявлены две функции - onGet и onRequest, то для запроса с методом GET будет вызвана функция onGet. Однако, если бы пришел запрос с методом POST, то была бы вызвана функция onRequest, так как функция onPost не была предусмотрена. Функция onRequest доступна для всех методов запроса, для которых не указана конкретная функция.

import type { RequestHandler } from '@builder.io/qwik-city';
 
export const onGet: RequestHandler<ProductData> = async ({ params }) => {
  // Здесь должен быть код доступа к вашей БД (сокращено для упрощения).
  return {
    skuId: params.skuId,
    price: 123.45,
    description: `Опсиание для ${params.skuId}`,
  };
};

Событие запроса

Функции обработчика запроса получают аргумент RequestEvent, который имеет следующие свойства:

ПолеОписание
requestОбъект запроса
responseОбъект ответа, который можно использовать для установки headers и status ответа
urlURL, который содержит pathname, hostname и т.д.
nextСледующая функция промежуточного ПО
abortЗапрос функции прерывания
paramsПользовательские параметры, найденные в URL
cookieПолучение и установка кук
platformОбъект данных платформы (полезен для Cloudflare, Netlify и т.д.)

Куки

interface Cookie {
  get: (key: string) => CookieValue | null;
  set: (key: string, value: string | number | Record<string, any>, options?: CookieOptions) => void;
  delete: (key: string) => void;
  has: (key: string) => boolean;
}

get Принимает строку с названием ключа и возвращает CookieValue, если значение присутствует, или null в противном случае.

interface CookieValue {
  value: string;
  json: <T = unknown>() => T;
  number: () => number;
}

Полученное значение - это простой объект с тремя полями:

  1. value: Содержит значение куки в виде строки;
  2. json(): Выполняет JSON.parse() над значением и возвращает результат;
  3. number(): Выполняет функцию Number() над значением и возвращает результат.

getAll Возвращает объект со всеми куками, если таковые имеются. Этот метод требуется когда имена кук заранее неизвестны. Позволяет перебрать все куки.

set Принимает ключ и значение и создает заголовок, который будет добавлен к ответу. Значение может быть типа string | number | Record<string, any>.

В качестве третьего аргумента вы можете опционально передать запись типа CookieOptions для установки дополнительных полей.

export interface CookieOptions {
  domain?: string;
  expires?: Date | string;
  httpOnly?: boolean;
  maxAge?: number | [number, 'seconds' | 'minutes' | 'hours' | 'days' | 'weeks'];
  path?: string;
  sameSite?: 'lax' | 'none' | 'strict';
  secure?: boolean;
}

Более подробную информацию об этих атрибутах и их значениях можно найти в статье MDN о заголовке Set-Cookie.

delete Добавляет к кукам заголовок с указанным ключом. Новый заголовок будет содержать дату истечения срока действия в поле expires, указывая браузерам на необходимость его удаления.

cookie.delete('my-cookie');
cookie.set('my-cookie', 'deleted', new Date(0));

По желанию при удалении кук можно задать путь и/или домен. Если ваши куки были созданы с указанием пути/домена, необходимо установить эти поля, чтобы удаление имело эффект.

cookie.delete('my-cookie', { domain: 'https://qwik.builder.io', path: '/docs/' });

has Удобный метод, возвращающий true или false в зависимости от наличия предоставленного ключа в куках.

cookie.has('my-cookie');

Участники

Спасибо всем участникам, которые помогли сделать эту документацию лучше!

  • adamdbradley
  • manucorporat
  • mhevery
  • tzdesign
  • mrhoodz
  • hamatoyogi