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

【问题标题】：How do I make an API call before the DOM component renders using svelte?如何在使用 svelte 渲染 DOM 组件之前进行 API 调用？
【发布时间】：2019-12-24 09:51:32
【问题描述】：

在 Svelte 中，onMount 通常用于进行 API 调用。我想在渲染 DOM 组件之前进行 API 调用。我能用什么？

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

【问题讨论】：

标签： svelte

【解决方案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}

【讨论】：

【解决方案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}

【讨论】：

跟进这个：当getData在onMount中被调用时，你会怎么做，也就是recommended way of loading data？我对你如何处理错误特别感兴趣。