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}

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

2 个答案: