在Svelte中请求服务器数据时是否需逐个脚本写catch？有无全局方案？

你完全不用在每个脚本的 try/catch 里重复写401跳转、500错误处理这类通用逻辑，下面是几种在Svelte应用中统一管理请求错误的方案：

1. 封装通用API请求函数 #

把所有服务器请求逻辑封装到一个公共函数里，在函数内部统一处理通用错误，所有组件直接调用这个封装后的函数即可。

示例代码（以fetch为例）：

// src/lib/api.js
export async function apiRequest(url, options = {}) {
  // 统一设置请求头（比如令牌）
  const defaultOptions = {
    headers: {
      'Authorization': `Bearer ${localStorage.getItem('token')}`,
      'Content-Type': 'application/json'
    }
  };
  const mergedOptions = { ...defaultOptions, ...options };

  try {
    const response = await fetch(url, mergedOptions);
    
    if (!response.ok) {
      const error = new Error(`请求失败：${response.status}`);
      error.response = response;
      throw error;
    }

    return await response.json();
  } catch (err) {
    // 统一处理通用错误
    if (err.response?.status === 401) {
      localStorage.removeItem('token');
      window.location.href = '/login'; // 跳转登录页
    } else if (err.response?.status === 500) {
      console.error('服务器内部错误:', err);
      // 这里可以触发全局错误提示
      dispatchGlobalError('服务器出错了，请稍后再试');
    }
    // 抛出错误，让调用方可以处理组件特有的逻辑
    throw err;
  }
}

组件中使用时，只需要处理当前组件的专属错误逻辑（如果需要）：

// script A
import { apiRequest } from '$lib/api';

try {
  let a = await apiRequest('/api/user/data');
} catch (err) {
  // 仅处理组件A特有的错误场景
  console.log('加载用户数据时的额外处理:', err);
}

// script B
import { apiRequest } from '$lib/api';

try {
  let b = await apiRequest('/api/something');
} catch (err) {
  // 仅处理组件B特有的错误场景
  console.log('加载其他数据时的额外处理:', err);
}

2. 用Svelte Store实现全局错误感知 #

创建一个全局错误状态的Store，在统一错误处理中更新这个Store，然后在根组件或任意需要的地方订阅Store，展示全局错误提示。

示例代码：

// src/stores/errorStore.js
import { writable } from 'svelte/store';

export const globalError = writable(null);

// 触发全局错误的工具函数
export function dispatchGlobalError(message) {
  globalError.set(message);
  // 5秒后自动清除错误提示
  setTimeout(() => globalError.set(null), 5000);
}

在根组件（比如+layout.svelte）中订阅并展示错误：

<!-- src/routes/+layout.svelte -->
<script>
  import { globalError } from '$stores/errorStore';
</script>

{#if $globalError}
  <div class="fixed top-4 left-1/2 -translate-x-1/2 bg-red-500 text-white px-4 py-2 rounded">
    {$globalError}
  </div>
{/if}

<slot />

之后在API封装函数里，遇到500这类错误时调用dispatchGlobalError即可触发全局提示。

3. SvelteKit专属：页面级错误处理（配合load函数） #

如果你的项目是SvelteKit，可以在load函数中抛出错误，然后用+error.svelte统一处理页面加载阶段的错误：

// src/routes/user/+page.server.js
import { apiRequest } from '$lib/api';
import { redirect, error } from '@sveltejs/kit';

export async function load() {
  try {
    const userData = await apiRequest('/api/user/data');
    return { userData };
  } catch (err) {
    if (err.response?.status === 401) {
      throw redirect(307, '/login');
    }
    throw error(500, '加载用户数据失败');
  }
}

创建+error.svelte页面展示错误：

<script>
  export let status;
  export let error;
</script>

<div class="flex flex-col items-center justify-center h-screen">
  <h1 class="text-4xl font-bold">{status}</h1>
  <p class="mt-4">{error.message}</p>
</div>

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