Svelte 3，异步 onMount 还是有效的替代方案？答案

【问题标题】：Svelte 3, async onMount or a valid alternative?Svelte 3，异步 onMount 还是有效的替代方案？
【发布时间】：2020-09-17 02:08:00
【问题描述】：

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

或者你可以建议我哪里出了问题以及我可以使用什么。

复制

为什么？

onMount() 是否识别 async 函数承诺？应该吗？

我需要 async 行为，因为我需要在渲染 Child 组件之前等待 function lazyLoading()。

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

【问题讨论】：

看{#await}：svelte.dev/tutorial/await-blocks
您是否建议同时使用#await 和onMount？
不，我不确定你想在onMount 做什么。看看我的例子：svelte.dev/repl/7e175db016b74c4ba4688c76114866c9?version=3.23.0
嗯，让我把它变成一个实际的答案......

【解决方案1】：

只是为了解释为什么 onMount 不能成为 async 函数（这可能将来会改变，但不要指望它）：

您可以从 onMount 处理程序返回一个函数，该处理程序在组件被销毁时调用。但是async 函数只能返回一个承诺。由于 Promise 不是函数，Svelte 将忽略返回值。

这与 React 中的 useEffect 相同，顺便说一下——函数必须是同步的，以避免竞争条件。 onMount 的推荐解决方案与 useEffect 相同 — 将 async 函数 inside 处理程序：

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

  foo();

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

（请注意，您有责任处理由于组件在承诺解决之前被销毁而出现的任何竞争条件，尽管在被销毁的组件内分配状态是无害的。）

我已打开一个问题来讨论在这些情况下提供更有用的反馈：https://github.com/sveltejs/svelte/issues/4944

【讨论】：

谢谢，这其实比我的回答更有见地。
我对此有疑问。在 sapper 文档中，sapper.svelte.dev/docs#Making_a_component_SSR_compatible 下的 onMount 与 async 关键字一起使用。这是否与您关于onMount 不是异步的说法相矛盾？这让我很困惑，有什么我看不到的吗？
这是否意味着当你不需要destroy函数时，可以使用async？
是的，这完全有效
现在，您可以在onMount 挂钩中使用async 函数。见svelte.dev/tutorial/onmount。

【解决方案2】：

onMount 必须是同步的。但是，您可以在标记中使用an {#await} block 并将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}

查看我的工作示例here。

这还有一个额外的好处，即允许您使用加载器以及在 promise 被拒绝时出现的标记，使用以下语法：

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

【讨论】：