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>