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

Question

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

或者，也许您可​​以建议我什么是错误的以及我可以使用的替代方法。

再现

1. 去这里：https : //svelte.dev/repl/000ae69c0fe14d9483678d4ace874726?version=3.23.0
2. 打开控制台
3. 点击按钮
4. 你应该看到消息："Mounting..."和"A lot of background work..."
5. 如果再次单击，则不会写入销毁消息

为什么？

难道onMount()识别async功能的承诺？应该是？

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

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

Answer 1

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

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

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

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

  foo();

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

（请注意，您有责任处理因组件在 promise 解决之前被销毁而产生的任何竞争条件，尽管在已销毁组件内分配状态是无害的。）

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

Answer 2

onMount必须是同步的。但是，您可以在标记和 make 中使用块，例如{#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}

请参阅我的工作示例。

这样做的另一个好处是允许您使用加载器以及在承诺被拒绝时出现的标记，使用以下语法：

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