javascript - Vue export import async await stops - Stack Overflow

admin管理员组

文章数量:1426484

I use Vue and have a method in load.js.

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

export { loadTask };

In a Vue ponent I call it but the await prevent the <template> to load. Without the await, the code below runs. What do I miss?

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

I use Vue and have a method in load.js.

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

export { loadTask };

In a Vue ponent I call it but the await prevent the <template> to load. Without the await, the code below runs. What do I miss?

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

• javascript
• vue.js
• import
• async-await
• export

Share Improve this question Follow asked Nov 9, 2021 at 18:49 Jens TörnellJens Törnell 24.9k4646 gold badges130130 silver badges223223 bronze badges 6

• 1 await is not valid at the top level unless your environment supports it. I don't think a <script> tag counts for top-level await, though. Are you not getting an error saying something along those lines? – VLAZ Commented Nov 9, 2021 at 18:51
• @VLAZ - It would if it were <script type="module"> but the above isn't (unless something does something to it before the browser sees it, the setup thing on it makes me wonder since I don't do Vue.js). – T.J. Crowder Commented Nov 9, 2021 at 18:54
• @VLAZ No, I'm not getting any errors. One strange thing, if I write console.log('whatever') before </script> it runs, but i stops the output in the <template></template>. – Jens Törnell Commented Nov 9, 2021 at 18:54
• 1 As @VLAZ said, most likely you're getting an error trying to use await at the top level outside a module. Perhaps the error is being obscured by a bundler or your environment? – T.J. Crowder Commented Nov 9, 2021 at 18:54
• 3 You can use top level await in Vue, but it must be used together with Suspense: 1. v3.vuejs/api/sfc-script-setup.html#top-level-await 2. stackoverflow./questions/69183835/… – Cianekjr Commented Nov 9, 2021 at 18:58

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

According to the documentation:

async setup() must be used in bination with Suspense, which is currently still an experimental feature. We plan to finalize and document it in a future release - but if you are curious now, you can refer to its tests (opens new window)to see how it works.

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

https://v3-migration.vuejs/breaking-changes/suspense.html#suspense

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

So if you have async setup you have to import this ponent in parent like that:

import { defineAsyncComponent } from "vue";

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

And use it in template wrapped in suspense:

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

Demo:

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

As described in Vue <script setup> Top level await causing template not to render, in case you don't need the full power of async ponents and Suspense, you can use either onBeforeMount:

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

or do the initialization inside an async function that you invoke without awaiting for the promise to plete:

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

or use promise chainig:

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

You additionally need to take care of error handling as appropriate for each case.

本文标签： javascriptVue export import async await stopsStack Overflow