Uso Vue y tengo un método en load.js
async function loadTask(x) { return await x; // Some async code } export { loadTask }; En un componente de Vue, lo llamo, pero la await impide que se cargue la <template> . Sin await , se ejecuta el siguiente código. ¿Qué echo de menos?
<script setup> import { loadTask } from './methods/load.js'; const test = loadTask(3); console.log(await test); </script> <template> <div>Does not run</div> </template>Según la documentación:
async setup() debe usarse en combinación con Suspense, que actualmente sigue siendo una característica experimental. Planeamos finalizarlo y documentarlo en una versión futura, pero si tiene curiosidad ahora, puede consultar sus pruebas (se abre en una ventana nueva) para ver cómo funciona.
https://v3.vuejs.org/api/sfc-script-setup.html#top-level-await
https://v3.vuejs.org/guide/migration/suspense.html#suspense
Vue <configuración de script> El nivel superior espera que la plantilla no se muestre
Entonces, si tiene una configuración asíncrona, debe importar este componente en el padre así:
import { defineAsyncComponent } from "vue"; export default { components: { HelloWorld: defineAsyncComponent(() => import("./components/HelloWorld.vue") ), }, }; </script>Y utilízalo en plantilla envuelta en suspenso:
<template> <suspense> <template #default> <HelloWorld /> </template> <template #fallback> <div>Loading...</div> </template> </suspense> </template>Manifestación:
https://codesandbox.io/s/reverent-sinoussi-9r5or?file=/src/components/HelloWorld.vue
Como se describe en Vue <configuración de script> El nivel superior espera que la plantilla no se muestre , en caso de que no necesite toda la potencia de los componentes asíncronos y Suspense , puede usar onBeforeMount :
const test = ref(''); onBeforeMount(async () => { test.value = await loadTask(3); console.log(test.value); }) o realice la inicialización dentro de una función async que invoque sin await a que se complete la promesa:
const test = ref(''); const init = async () => { test.value = await loadTask(3); console.log(test.value); } init();o use promesa chainig:
const test = ref(''); loadTask(3).then(task => { test.value = task; console.log(test.value); });Además, debe encargarse del manejo de errores según corresponda para cada caso.