Sveltekit：在组件中调用外部REST API的可行性咨询

当然可以在SvelteKit组件中调用外部REST API，针对新版本的破坏性变更，以下是分场景的适配方案：

1. 在load函数中调用（服务器/通用端） #

新版本SvelteKit的load函数支持在服务器或客户端运行，适合预获取组件渲染所需数据，推荐使用函数参数提供的fetch（而非全局fetch），自动适配环境并规避跨域问题：

<script context="module">
  export async function load({ fetch }) {
    const res = await fetch('https://api.example.com/data');
    const data = await res.json();

    if (res.ok) {
      return { props: { data } };
    }

    return {
      status: res.status,
      error: new Error('Failed to fetch data')
    };
  }
</script>

<script>
  export let data;
</script>

<pre>{JSON.stringify(data, null, 2)}</pre>

2. 在组件客户端脚本中调用（交互触发） #

如果需要在用户操作（如点击按钮）后调用API，直接在组件客户端脚本中使用fetch或第三方库（如axios）即可：

使用原生fetch #

<script>
  let data = null;
  let isLoading = false;

  async function fetchData() {
    isLoading = true;
    try {
      const res = await fetch('https://api.example.com/data');
      if (!res.ok) throw new Error('Request failed');
      data = await res.json();
    } catch (err) {
      console.error(err);
    } finally {
      isLoading = false;
    }
  }
</script>

<button on:click={fetchData} disabled={isLoading}>
  {isLoading ? 'Loading...' : 'Fetch Data'}
</button>

{#if data}
  <pre>{JSON.stringify(data, null, 2)}</pre>
{/if}

使用axios #

先安装依赖：npm install axios，再导入使用：

<script>
  import axios from 'axios';
  let data = null;

  async function fetchData() {
    try {
      const res = await axios.get('https://api.example.com/data');
      data = res.data;
    } catch (err) {
      console.error(err);
    }
  }
</script>

3. 新版本注意事项 #

• 避免全局fetch在服务器端使用：服务器端运行时全局fetch可能存在环境兼容问题，始终优先使用load函数或handle钩子提供的fetch实例。
• 跨域处理：客户端直接调用第三方API时，需确保后端配置CORS；或通过SvelteKit的hooks.server.js设置代理绕过跨域：

// hooks.server.js
export async function handle({ event, resolve }) {
  if (event.url.pathname.startsWith('/api/proxy')) {
    const targetUrl = event.url.pathname.replace('/api/proxy', 'https://api.example.com');
    const res = await fetch(targetUrl);
    return new Response(res.body, res);
  }
  return resolve(event);
}

之后组件内调用/api/proxy/data即可。

• 环境变量管理：API地址不要硬编码，存入.env文件（如VITE_API_URL=https://api.example.com），通过import.meta.env.VITE_API_URL读取。

内容的提问来源于stack exchange，提问作者Saif-Alislam Dekna