event オブジェクトには、標準のFetch APIのように動作するfetchメソッドがありますが、特別な機能があります。
- これは、受信リクエストから
cookieおよびauthorizationヘッダーを継承するため、サーバーで認証済みリクエストを行うために使用できます。 - サーバー上で相対的なリクエストを行うことができます(通常、
fetchはサーバーコンテキストで使用される場合、オリジンを含む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はブラウザからも呼び出すことができます。そのシナリオでは、handleFetchは、サーバー上で実行されている場合、APIサーバーとパブリックインターネットの間に存在するプロキシとロードバランサーをバイパスして、内部URLにリダイレクトする必要がある、https://api.yourapp.comなどのパブリックURLへのブラウザからのリクエストがある場合に役立ちます。
1
2
3
4
5
<script>
let { data } = $props();</script>
<h1>{data.message}</h1>