Vue 导出导入异步等待停止答案

【问题标题】：Vue export import async await stopsVue 导出导入异步等待停止
【发布时间】：2021-12-22 11:26:00
【问题描述】：

我使用 Vue 并且在 load.js 中有一个方法。

async function loadTask(x) {
  return await x; // Some async code
}

export { loadTask };

在一个 Vue 组件中，我调用它，但 await 阻止 <template> 加载。如果没有await，下面的代码会运行。我错过了什么？

<script setup>
import { loadTask } from './methods/load.js';
const test = loadTask(3);
console.log(await test);
</script>
<template>
  <div>Does not run</div>
</template>

【问题讨论】：

await 在顶层无效，除非您的环境支持。不过，我认为 <script> 标记对于顶级等待并不重要。你在说这些话时没有收到错误吗？
@VLAZ - 如果它是 <script type="module"> 但上面不是（除非在浏览器看到它之前对它做了什么，它上面的 setup 东西让我想知道，因为我不要做 Vue.js)。
@VLAZ 不，我没有收到任何错误。一件奇怪的事情，如果我在</script> 之前写console.log('whatever') 它会运行，但我会在<template></template> 中停止输出。
正如@VLAZ 所说，您很可能在尝试在模块外部的顶层使用await 时遇到错误。也许错误被捆绑程序或您的环境掩盖了？
可以在Vue中使用顶级await，但必须和Suspense一起使用：1.v3.vuejs.org/api/sfc-script-setup.html#top-level-await 2.stackoverflow.com/questions/69183835/…

标签： javascript vue.js import async-await export

【解决方案1】：

根据文档：

async setup() 必须与 Suspense 结合使用，即目前仍是一个实验性功能。我们计划最终确定并在未来的版本中记录它 - 但如果你现在好奇，你可以请参阅其测试（打开新窗口）以了解其工作原理。

https://v3.vuejs.org/api/sfc-script-setup.html#top-level-await

https://v3.vuejs.org/guide/migration/suspense.html#suspense

Vue <script setup> Top level await causing template not to render

因此，如果您有异步设置，则必须像这样在父级中导入此组件：

import { defineAsyncComponent } from "vue";

export default {
  components: {
    HelloWorld: defineAsyncComponent(() =>
      import("./components/HelloWorld.vue")
    ),
  },
};
</script>

并在被悬念包裹的模板中使用：

<template>
  <suspense>
    <template #default>
      <HelloWorld />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
  </suspense>
</template>

演示：

https://codesandbox.io/s/reverent-sinoussi-9r5or?file=/src/components/HelloWorld.vue

【讨论】：

【解决方案2】：

如Vue <script setup> Top level await causing template not to render 中所述，如果您不需要异步组件和Suspense 的全部功能，您可以使用onBeforeMount：

const test = ref('');
onBeforeMount(async () => {
  test.value = await loadTask(3);
  console.log(test.value);
})

或在您调用的 async 函数中进行初始化，而无需 awaiting 以完成承诺：

const test = ref('');
const init = async () => {
  test.value = await loadTask(3);
  console.log(test.value);
}
init();

或使用承诺链：

const test = ref('');
loadTask(3).then(task => {
  test.value = task;
  console.log(test.value);
});

您还需要针对每种情况进行适当的错误处理。

【讨论】：