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

Question

我需要的是使用 async-await在 slim onMount() .

或者，也许您可​​以建议我出了什么问题以及我可以使用什么。

转载

去这里:https://svelte.dev/repl/000ae69c0fe14d9483678d4ace874726?version=3.23.0

打开控制台

点击按钮

您应该会看到以下消息:"Mounting..."和 "A lot of background work..."

如果再次单击，则不会写入销毁消息

为什么？

做了 onMount()识别 async功能 promise ？应该是？

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

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

Answer 1

只是为了解释为什么onMount不能是 async功能(这可能会在 future 改变，但不要指望它):

您可以从 onMount 返回一个函数销毁组件时调用的处理程序。但是async函数只能返回一个 promise 。由于 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