请求处理

src/routes 目录中的每个 layout.tsindex.ts 文件都可以访问当前的 HTTP 请求、响应和 URL。这使您可以检索和修改数据,甚至使用自定义内容进行响应。

Qwik City 实现了一个基于 src/routes 目录层次结构的中间件系统。中间件系统用于处理 HTTP 请求和响应,可供页面、布局和 端点 使用。

每个路由都可以添加 HTTP 请求和响应处理程序,允许开发人员检索和修改数据。处理程序也可以由 端点 使用,端点只响应数据,而不是页面的 HTML。

此功能使您能够处理任何请求事件,在渲染组件并使用自定义内容进行响应之前,对请求管道产生副作用。它可供页面、布局和端点路由使用,但不能在常规组件上使用。

请求和响应处理程序

在页面、布局和 端点 上,我们可以通过实现请求处理程序函数(如 onGetonPostonPut 等)来访问请求数据。这些函数根据用于此路由的 HTTP 方法 执行。

此外,onRequest 函数可用于处理任何请求方法(而不是特定方法),以 中间件 的形式。例如,如果同时提供了 onGetonRequest,对于 GET 请求,将调用 onGet。但是,在这种情况下,如果传入 POST 请求方法,则会调用 onRequest 处理程序,因为没有提供 onPostonRequest 可用作对没有特定方法的任何请求方法的通配符。

import type { RequestHandler } from '@builder.io/qwik-city';
 
export const onGet: RequestHandler<ProductData> = async ({ params }) => {
  // put your DB access here (hard coding data for simplicity)
  return {
    skuId: params.skuId,
    price: 123.45,
    description: `Description for ${params.skuId}`,
  };
};

请求事件

请求处理程序函数接收一个 RequestEvent 参数,该参数具有以下属性

字段描述
request请求对象
response响应对象,可用于设置响应 headersstatus
urlURL,包括 pathnamehostname 等。
next下一个中间件函数
abort请求中止函数
paramsURL 中找到的自定义用户参数
cookie获取和设置 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 获取一个包含 cookie 名称的字符串,如果存在则返回 CookieValue,否则返回 null。

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

cookie 值是一个简单的记录,包含三个字段

  1. value:包含 cookie 值作为字符串
  2. json():对值运行 JSON.parse() 并返回结果
  3. number():对值运行 Number() 并返回结果

getAll 返回包含所有 cookie 的对象(如果有)。如果 cookie 的名称未知且必须解析,则有时需要这样做。

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;
}

有关这些属性及其值的更多信息,请参阅 关于 Set-Cookie 标头的 MDN 文章

delete 将包含所提供键的标头附加到 cookie。新标头将在 expires 字段中包含一个过期日期,告诉浏览器将其删除。

cookie.delete('my-cookie');
// equivalent to
cookie.set('my-cookie', 'deleted', new Date(0));
// or
cookie.set('my-cookie', '');

可以选择在删除 cookie 时设置路径、sameSite 和/或域。如果您的 cookie 是使用路径/域创建的,则必须设置这些字段才能使删除生效。

cookie.delete('my-cookie', { domain: 'https://qwik.node.org.cn', path: '/docs/' });

has 一个便利方法,根据所提供键在 cookie 中是否存在返回 true 或 false。

cookie.has('my-cookie');

贡献者

感谢所有帮助改进此文档的贡献者!

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