event 对象有一个 fetch 方法,它的行为类似于标准的 Fetch API,但更强大:
- 它可以在服务端进行带凭证的请求,因为它继承了来自传入请求的
cookie和authorization头部 - 它可以在服务端进行相对请求(通常情况下,在服务端环境中使用
fetch需要带有源(origin)的 URL) - 内部请求(例如
+server.js路由)在服务端运行时直接转到处理函数,无需 HTTP 调用开销
它的行为可以通过 handleFetch 钩子修改,默认情况下看起来是这样的:
src/hooks.server
export async function handleFetch({ event, request, fetch }) {
return await fetch(request);
}例如,我们可以将对 src/routes/a/+server.js 的请求改为响应 src/routes/b/+server.js 的内容:
src/hooks.server
export async function handleFetch({ event, request, fetch }) {
const url = new URL(request.url);
if (url.pathname === '/a') {
return await fetch('/b');
}
return await fetch(request);
}后面,当我们讨论通用 load 函数时,我们会看到 event.fetch 也可以从浏览器调用。在这种情况下,如果你有来自浏览器的对公共 URL(如 https://api.yourapp.com)的请求,当在服务端运行时,这些请求应该被重定向到内部 URL(绕过位于 API 服务器和公共互联网之间的代理和负载均衡器),这时 handleFetch 就很有用。
上一页 下一页
1
2
3
4
5
<script>
let { data } = $props();</script>
<h1>{data.message}</h1>