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

2023-12-29

我需要的是使用async-await在斯韦尔特onMount().

或者也许你可以建议我哪里出了问题以及我可以使用什么替代方案。

重现

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

WHY?

Did onMount()认识到async功能承诺?应该是?

我需要它async行为是因为我需要等待function lazyLoading()在渲染之前Child成分。

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


只是为了解释为什么onMount不能是一个async函数(这个might将来会改变,但不要指望它会改变):

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

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

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

  foo();

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

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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Svelte 3、async onMount 还是有效的替代方案? 的相关文章

随机推荐