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}