如何在非页面的 SvelteKit 组件中获取数据

克利夫顿实验室

SvelteKit v1.0.0-next.324

我有一个 SvelteKit 组件，它在我的应用程序的多个地方使用，它需要从我的一个端点获取自己的数据。

我读了这个问题load，指出除非它是一个页面，否则我不能拥有一个功能。假设我无法将其设为一个页面并将其导入另一个页面，我需要能够自行将数据提取到该组件中。

<script lang="ts">
import { onMount } from 'svelte'
import type { Aircraft } from '$lib/models'
  
let aircrafts: Aircraft[]

onMount(async() => {
  aircrafts = await (await fetch('/aircrafts')).json()
  console.log(aircrafts) //<-- This works
})
</script>
  
<p>{aircrafts.length} Aircraft</p> //<-- undefined Aircraft

我的/aircrafts端点返回数据就好了，并且console.log显示了数据。但在我的 HTML 中，aircrafts.length显示undefined Aircraft.

我认为这是因为onMount在设置道具并且数据实际上没有更新之后发生。

如何将数据提取到独立组件中？

托马斯·亨内斯

您的问题是您试图aircrafts.length在数据查询有机会解决之前显示。而且由于不是反应式的，因此当您的承诺最终解决aircrafts时，您的段落不会重新呈现。

解决这个问题的最简洁和最类似 Svelte 的方法是使用{#await}块：

<script lang="ts">
import type { Aircraft } from '$lib/models'
  
let aircrafts: Aircraft[]

async function getAircrafts() {
  const result = await fetch('/aircrafts')
  return result.json()
}
</script>

{#await getAircrafts()}
  <p>Loading aircrafts...</p>
{:then aircrafts}
  <p>{aircrafts.length} Aircraft</p>
{:catch error}
  <p>Error loading aircrafts: {error.message}</p>
{/await}

请注意，该onMount块是不必要的，因为您不必在获取数据之前等待任何内容被挂载。事实上，您希望尽快开始获取操作。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。