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

Question

我需要的是在 Svelte onMount().

中使用 async-await

或者你可以告诉我哪里出了问题以及我可以替代使用什么。

重现

转到此处：https://svelte.dev/repl/000ae69c0fe14d9483678d4ace874726?version=3.23.0
打开控制台
点击按钮
您应该会看到消息："Mounting..." 和 "A lot of background work..."
如果您再次单击，则不会写入销毁消息

为什么？

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

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

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

Answer 1

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。

这有一个额外的好处，就是允许您使用加载程序以及在承诺被拒绝时出现的标记，使用以下语法：

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

Answer 2

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

您可以 return 来自 onMount 处理程序的函数，该函数在组件被销毁时调用。但是 async 函数 只能 return 一个 promise。由于 promise 不是函数，Svelte 将忽略 return 值。

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

onMount(() => { async function foo() { bar = await baz(); } foo(); return () => console.log('destroyed'); });

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

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

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

Svelte 3, async onMount or a valid alternative?

javascript

ecmascript-6

svelte

svelte-component

svelte-3