Svelte 3、async onMount 還是有效的替代方案？

Question

我需要的是在 Svelte onMount()中使用async-await 。

或者，也許您可以建議我哪里出了問題以及我可以替代使用什么。

重現

1. go 這里： https://svelte.dev/repl/000ae69c0fe14d9483678d4ace874726?version=3.23.0
2. 打開控制台
3. 點擊按鈕
4. 您應該看到消息： "Mounting..."和"A lot of background work..."
5. 如果您再次單擊，則不會寫入銷毀消息

為什么？

onMount()是否識別async function promise？ 應該是？

我需要這種async行為，因為在渲染Child組件之前我需要等待function lazyLoading() 。

在 Svelte 中是否有其他方法可以做到這一點？

Answer 1

只是為了解釋為什么onMount不能是async function（這可能會在未來改變，但不要指望它會）：

您可以從銷毀組件時調用的onMount處理程序返回 function。 但是async函數只能返回 promise 。 由於 promise 不是 function，Svelte 將忽略返回值。

這與 React 中的useEffect相同，順便說一句 - function 必須同步以避免競爭條件。 onMount 的推薦解決方案與onMount相同——在處理程序中放置一個async useEffect ：

onMount(() => {
  async function foo() {
    bar = await baz();
  }

  foo();

  return () => console.log('destroyed');
});

（請注意，您有責任處理由於組件在 promise 解析之前被銷毀而引起的任何競爭條件，盡管在已銷毀的組件內分配 state 是無害的。）

我已經打開一個問題來討論在這些情況下提供更有用的反饋： https://github.com/sveltejs/svelte/issues/4944

Answer 2

onMount必須是同步的。 但是，您可以在標記中使用{#await}塊並使lazyLoading async ，例如：

{#await lazyLoading() then data}
  I'm the child and I loaded "{data}".
{/await}

你也可以做...

<script>
  let dataPromise = lazyLoading()
</script>

{#await dataPromise then data}
  I'm the child and I loaded "{data}".
{/await}

請在此處查看我的工作示例。

這樣做的額外好處是允許您使用加載程序以及在 promise 被拒絕時出現的標記，使用以下語法：

{#await promise}
  loading
{:then value}
  loaded {value}
{:catch error}
  failed with {error}
{/await}