跳到主要內容

event 物件有一個 fetch 方法,其行為類似於標準的 Fetch API,但具有超能力

  • 它可以用於在伺服器上發出帶有憑證的請求,因為它繼承了來自傳入請求的 cookieauthorization 標頭
  • 它可以在伺服器上發出相對請求(通常,當在伺服器環境中使用時,fetch 需要帶有來源的 URL)
  • 當在伺服器上執行時,內部請求(例如針對 +server.js 路由)會直接傳送到處理函式,而無需 HTTP 呼叫的開銷

它的行為可以使用 handleFetch hook 來修改,預設情況下如下所示

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 也可以從瀏覽器呼叫。在這種情況下,如果您從瀏覽器向 https://api.yourapp.com 之類的公共 URL 發出請求,而這些請求在伺服器上執行時應被重新導向到內部 URL(繞過 API 伺服器和公共網際網路之間的任何 Proxy 和負載平衡器),則 handleFetch 非常有用。

在 GitHub 上編輯此頁面

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