setHeaders}){consturl=`https://cms.example.com/products.json`;constresponse=awaitfetch(url);// Headers are only set during SSR, caching the page's HTML// for the same length of time as the underlying data.setHeaders({age:response.headers.get("age"),"cache-control":response.headers.get("cache-control"),});returnresponse
const res = await fetch(`/api/items/${params.id}`); const item = await res.json(); return { item }; } Cookies 服务端load函数可以获取和设置cookies。 /// file: src/routes/+layout.server.js // @filename: ambient.d.ts declare module '$lib/server/database' { export function getUser...
/// file: src/routes/blog/[slug]/+page.server.js// @filename: ambient.d.tsdeclareglobal{constgetPostFromDatabase:(slug:string)=>{title:string;content:string;}}export{};// @filename: index.js// ---cut---import{error}from'@sveltejs/kit';/** @type {import('./$types').PageServe...
通用和服务端 load 函数都可以访问描述请求的属性(params、route 和url)以及各种函数(fetch、setHeaders、parent、depends 和untrack)。这些在后面的章节中会描述。 服务端 load 函数使用 ServerLoadEvent 调用,它从 RequestEvent 继承clientAddress、cookies、locals、platform 和request。 通用load 函数使用具有 data 属性...
export async function load({ fetch }) { const response = await fetch('/api/user'); +++ return { user: await response.json() };+++ } ...然后将它传递给需要它的组件,或使用page.data。 如果您不使用 SSR,那么就不会有意外将一个用户数据暴露给另一个用户的风险。但您仍然应该避免在load函数中...
在Svelte 4 中,您需要使用export let data代替 [!NOTE] SvelteKit 使用元素在路由之间导航,而不是框架特定的<Link>组件。 +page.js 通常,页面在渲染之前需要加载一些数据。为此,我们添加一个+page.js模块,该模块导出一个load函数: /// file: src/routes/blog/[slug]/+page.jsimport{error}from'@sveltejs...
import {onMount} from "svelte"; onMount(async ()=>{ try { const response = await fetch('/API',{ method:"POST", body:JSON.stringify({ func:"get_btc_ohlc", params:["bitcoin"] }) }) if(!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } console.l...
exportletdata; consttitle = data.title; {title} 现在,让我们继续与 JSON 占位符职位 API 进行交互。为此,您可以使用JavaScript Fetch API,但 SvelteKit 提供了自己的fetch方法,您可以在渲染页面之前使用该方法从 API 端点获取数据: exportconstload =async(loadEvent)=>{ const{fetch}= ...
API 路由: 除了页面路由,SvelteKit 还支持 API 路由。在 src/routes 目录下创建 .js 或 .ts 文件,它们将处理 API 请求。例如,src/routes/api/data.js 可以处理 /api/data 路径的请求。 exportasyncfunctionget(request){constresponse=awaitfetch('https:///data');return{body:awaitresponse.json(),};} ...
import { onMount } from 'svelte'; let data; // 在组件挂载时获取数据 onMount(async () => { const response = await fetch('https://api.example.com/data'); data = await response.json(); }); {#if data} <!-- 展示数据