如何在 DOM 组件使用 svelte 呈现之前进行 API 调用？

Question

在 Svelte 中，onMount 通常用于进行 API 调用。我想在呈现 DOM 组件之前进行 API 调用。我可以用它做什么？

我尝试使用 beforeUpdate，我认为它会在 beforeUpdate 内的代码块为运行之后呈现 DOM 元素。但事实并非如此。那么，我该怎么做呢？

Answer 1

您可以按照您的建议在 onMount 中执行 API 调用，并使用 {#if expression} 块仅在 API 调用已解析时呈现组件。

示例 (REPL)

<script>
  import { onMount } from 'svelte';

  function getData() {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve({ foo: 1, bar: 2 });
      }, 1000);
    });
  }

  let data;

  onMount(() => {
    getData().then(response => {
      data = response;
    })
  })
</script>

{#if data}
  <div>Foo: {data.foo}</div>
  <div>Bar: {data.bar}</div>
{/if}

Answer 2

您可以使用 https://svelte.dev/docs#await 在渲染和最终错误处理之前为您提供更多的灵活性

<script>
    function getData() {
        return new Promise(resolve => {
            setTimeout(() => {
               resolve({ foo: 1, bar: 2 });
            }, 1000);
        });
    }

    let data = getData();
</script>

{#await data}
    <p>
        hold on, loading data...
    </p>
{:then value}
    <div>Foo: {value.foo}</div>
    <div>Bar: {value.bar}</div>
{/await}

如何在 DOM 组件使用 svelte 呈现之前进行 API 调用？

How do I make an API call before the DOM component renders using svelte?

svelte