Svelte组件独立通过POST请求获取数据的实现及问题求助

1. 完善请求错误处理，捕获HTTP状态异常 #

fetch API仅在网络层面失败时才会抛出错误，若API返回非2xx状态码（如400/500）但仍返回JSON数据，fetch不会自动触发reject。这会导致你在控制台看到响应数据，但后续逻辑因未处理状态异常出现问题。修改你的请求函数，添加状态检查：

<script lang="ts">
  async function getDataFromAPI() {
    const body = {
      action: 'search',
    };
    const res = await fetch('https://externalAPI.com', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(body)
    });

    // 新增：检查响应状态是否正常
    if (!res.ok) {
      const errorDetails = await res.json();
      throw new Error(`请求失败：${res.status} - ${JSON.stringify(errorDetails)}`);
    }

    const values = await res.json();
    return values;
  }
  
  let promise = getDataFromAPI();
</script>
  
{#await promise }
    <p>...waiting</p>
{:then data}
    <p>{data.length} my data </p>
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}

2. 排查并解决跨域（CORS）问题 #

你提到的“Failed to fetch”错误大概率是跨域限制导致：浏览器网络面板能看到API返回数据，但因CORS策略，fetch无法读取响应内容，最终抛出错误。

在SvelteKit开发环境中，可通过Vite代理绕过跨域：

• 项目根目录下修改vite.config.ts：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    proxy: {
      '/api-proxy': {
        target: 'https://externalAPI.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api-proxy/, '')
      }
    }
  }
});

• 修改fetch请求的URL为代理路径：

const res = await fetch('/api-proxy', { /* 其他配置不变 */ })

3. 验证请求的唯一性 #

确认控制台中看到的values确实来自当前组件的请求，而非浏览器缓存、其他页面请求或调试时的临时输出。可在网络面板中勾选“禁用缓存”，重新测试。

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