使用 svelte 中的 fetch 重新获取或轮询外部 API

Question

Svelte 新手，遇到了一些问题。

当前在 +page.server.js 中执行以下操作 我想每几百毫秒轮询一次这个 API，但我不确定如何做到这一点。我尝试在这里使用设置间隔但无济于事。

export async function load({params}) {
  const response = await fetch(
      `http://localhost:9595/api/v1/chrysalis/example?uid=${params.uid}`
  )
  const site = await response.json()
  const siteData = site[0]
  console.log(siteData)

  return {
    uid: params.uid,
    partitions: siteData.partitions,
    zones: siteData.zones,
    zTypes: siteData.zTypes,
    zStates: siteData.zStates,
    zNames: siteData.zNames
  }
}

例如，我使用 SWR 和刷新间隔：1 在 next.Js 中构建了这个。

  const {data, error, isLoading} = useSWR(
      'http://localhost:9595/api/v1/chrysalis/example',
      (url) => {
        const searchParams = new URLSearchParams();
        searchParams.append("uid", body.uid)
        const newUrl = `${url}?${searchParams.toString()}`
        const options = {
          method: 'GET',
          headers: {'Content-Type': 'application/json'},
        }
        return fetch(newUrl, options).then(res => res.json())
      },
      {
        refreshInterval: 1
      }
  );

我也尝试过对 +page.svelte 执行以下 onMount 操作，但是当尝试从客户端访问 API 时，我收到 CORS 错误。（如果 +page.js 不是 +page.server.js 之前遇到过此问题

let x;

  onMount(async () => {
    setInterval(async () => {
      const response = await fetch(
          `http://localhost:9595/api/v1/chrysalis/example?uid=${data.uid}`
      )
      const site = await response.json()
      x = site[0]
      console.log(x)
    }, 3000)
  })

Answer 1

出现 CORS 错误是因为 +page.svelte/+page.js 在浏览器中运行。因此，您需要通过允许从浏览器调用的服务来代理调用。 （或者放宽http://localhost:9595上的CORS限制）

您可以使用 SvelteKit 本身通过创建内部端点来代理调用。所以：

1. 内部端点只是获取

   http://localhost:9595/api/foo/...

   并返回结果。 （您可以直接转发来自

   fetch()

   的响应对象）
2. +page.svelte 从

   setInterval()

   调用该内部端点。