Basic Svelte
Bindings
Classes and styles
Advanced Svelte
Advanced reactivity
Motion
Advanced bindings
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
Conclusion
event オブジェクトは標準の Fetch API のように振る舞う fetch メソッドを持っていますが、以下のスーパーパワーを備えています:
- 受け取ったリクエストから
cookieとauthorizationを継承するので、サーバー上で認証付きのリクエストを行うことができます - サーバー上で相対リクエストを行うことができます (通常、
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);
}後に、universal load 関数を学習するとき、event.fetch はブラウザでも呼び出せることを学びます。ブラウザからリクエストするときは https://api.yourapp.com のようなパブリックな URL で、それをサーバー上で実行するときは内部 URL にリダイレクトしたいとき (API サーバーとパブリックなインターネットの間にあるロードバランサーやプロキシーをバイパスしたいとき)、handleFetch はとても有用です。
previous next
1
2
3
4
5
<script>
let { data } = $props();</script>
<h1>{data.message}</h1>