Skip to main content
Svelte 基础
介绍
响应式
属性
逻辑
事件
绑定
类和样式
Actions
过渡动画
Svelte 进阶
高级响应性
复用内容
Motion
高级绑定
高级过渡效果
Context API
特殊元素
<script module>
后续步骤
SvelteKit 基础
介绍
路由
加载数据
请求头和 Cookie
共享模块
表单
API 路由
$app/state
错误和重定向
SvelteKit 进阶
钩子函数
页面选项
链接选项
高级路由
高级加载
环境变量
结论

event 对象有一个 fetch 方法,它的行为类似于标准的 Fetch API,但更强大:

  • 它可以在服务端进行带凭证的请求,因为它继承了来自传入请求的 cookieauthorization 头部
  • 它可以在服务端进行相对请求(通常情况下,在服务端环境中使用 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 就很有用。

在 GitHub 编辑此页面

上一页 下一页
1
2
3
4
5
<script>
	let { data } = $props();
</script>
 
<h1>{data.message}</h1>