Svelte 5中如何使用Fetch API进行错误处理？

SvelteKit的load函数里的错误处理逻辑和原生JavaScript完全兼容，核心就是用try/catch捕获网络异常，同时手动判断HTTP响应状态码处理请求失败的情况，下面是两种常用的处理方式：

方式一：抛出异常，交由SvelteKit错误页面处理 #

这种方式会让框架自动渲染对应的+error.svelte页面，适合通用错误场景：

import type { PageLoad } from './$types';

export const load: PageLoad = async ({ fetch, params }) => {
    try {
        const res = await fetch(`/api/items/${params.id}`);
        
        // 检查HTTP响应状态，非2xx状态码视为错误
        if (!res.ok) {
            throw new Error(`请求失败: ${res.status}`, { cause: res });
        }
        
        const item = await res.json();
        return { item };
    } catch (err) {
        // 可选：添加日志记录
        console.error('加载数据失败:', err);
        // 重新抛出错误，让SvelteKit触发错误页面
        throw err;
    }
};

抛出错误后，你可以在同目录下创建+error.svelte页面来自定义错误展示：

<script lang="ts">
    export let error;
    export let status;
</script>

<div class="error-page">
    <h1>{status}: 出错了</h1>
    <p>{error.message}</p>
</div>

方式二：返回错误信息，在页面组件内处理 #

如果需要在当前页面内展示错误（而非跳转到错误页），可以将错误信息作为返回值的一部分：

import type { PageLoad } from './$types';

export const load: PageLoad = async ({ fetch, params }) => {
    try {
        const res = await fetch(`/api/items/${params.id}`);
        
        if (!res.ok) {
            return {
                item: null,
                error: {
                    status: res.status,
                    message: await res.text() || `请求失败，状态码: ${res.status}`
                }
            };
        }
        
        const item = await res.json();
        return { item, error: null };
    } catch (err) {
        return {
            item: null,
            error: {
                status: 0,
                message: '网络请求失败，请检查网络连接'
            }
        };
    }
};

然后在+page.svelte中根据返回的数据展示内容：

<script lang="ts">
    export let data;
</script>

{#if data.error}
    <div class="error">
        <h2>加载失败</h2>
        <p>{data.error.message}</p>
        {#if data.error.status}
            <p>状态码: {data.error.status}</p>
        {/if}
    </div>
{:else if data.item}
    <div class="item-detail">
        <h1>{data.item.name}</h1>
        <!-- 渲染商品详情内容 -->
    </div>
{/if}

关键注意点 #

• Fetch API本身只有网络层面的失败（比如断网、域名不存在）才会触发catch块，HTTP 404/500这类状态码不会，必须通过res.ok（判断状态码是否在200-299之间）手动检测。
• 抛出的错误可以携带cause参数传递响应对象，方便在错误页面中获取更多信息。

内容的提问来源于stack exchange，提问作者Aces