fetch 和handleFetch 的事件参数 - sveltejs/kit

Question

根据我的观察，有三个函数（handle（）、handleFetch（）和handleError（））被设计用来处理获取请求。这些函数中的每一个都接受一个事件参数，其中包括一个

route.id

。但是，我注意到，handleFetch() 函数虽然包含

route.id

参数，但似乎显示调用 fetch() 的路径，而不是 fetch() 中提到的特定端点。

例如：

从 url

+page.server.js

 调用 fetch from 

http://localhost:5173/admin/users/123

export const load = async ({ fetch, params }) => {
  const id = params.id;
  const response = await fetch(`/api/users/${id}`);
  const data = await response.json();
  return data;
};

处理来自

+hooks.server.ts

中三个函数的获取：

export const handle: Handle = ({ event, }) => {
  console.log(event.route.id); // expected result: api/users/[id]
  // output result: api/users/[id]
};

export const handleFetch: HandleFetch = ({ event }) => {
  console.log(event.route.id); // expected result: api/users/[id]
  // output result: admin/users/123 --> UGH!!!!
};

export const handleError = ({ event }) => {
  console.log(event.route.id); api/users/[id]
  // output result: api/users/[id]
};

感谢您对此事的关注，并且感谢您为解决此差异提供的任何见解或指导。

Answer 1

这里的问题是 “哪里” 和 “何时” 这些函数运行，以及

event.route.id

实际上是什么。

在所有三种情况下，

route.id

是函数执行的当前位置。

对于

handle

和

handleError

来说，这是 正在呈现的页面或端点，而对于

handleFetch

来说，这是 执行请求的页面。

一个简单的例子可能更能说明问题。

// /routes/+page.server.js
export const load = async ({ fetch }) => {
  console.log('in page.server');
  const res = await fetch('/api').then((res) => res.json());
  return {
    res
  };
};

// /routes/api/+server.js
import { json } from '@sveltejs/kit';
export const GET = async () => {
  console.log('in api');
  return json({ status: 'ok' });
};

// /hooks.server.js
export const handle = async ({ event, resolve }) => {
    console.log('in handle', event.route.id);
    return await resolve(event);
};

export const handleFetch = ({ event, request, fetch }) => {
  console.log('in fetch', event.route.id);
  return fetch(request);
};

这里我们有一个非常简单的设置，只有一个页面在加载期间向内部 api 发出请求。

加载页面时，我们在控制台中得到以下输出 |输出|评论 | |---|---| |在手柄中/ |尝试渲染根| |在页面.服务器中|页面加载功能| |在获取/ |仍在根目录上，正在执行获取 |
|在句柄/api中|尝试渲染 api 调用 | |在 API 中 |在 api 中 GET |