vuejs / rfcs

RFCs for substantial changes / feature additions to Vue core
4.87k stars 548 forks source link

Top-level await doesn't work #390

Closed zhenhappy closed 3 years ago

zhenhappy commented 3 years ago

The page is blank after using top-level await.

https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmNvbnN0IGEgPSBhd2FpdCBmZXRjaChgaHR0cHM6Ly9odHRwYmluLm9yZy9nZXRgKS50aGVuKHIgPT4gci5qc29uKCkpXG5jb25zdCBiID0gJ2hlbGxvJ1xuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPGRpdj5cbiAgICB7eyBhIH19XG4gICAge3sgYiB9fVxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+IiwiaW1wb3J0LW1hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge1xuICAgIFwidnVlXCI6IFwiaHR0cHM6Ly9zZmMudnVlanMub3JnL3Z1ZS5ydW50aW1lLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSJ9

<script setup>
const a = await fetch(`https://httpbin.org/get`).then(r => r.json())
const b = 'hello'
</script>

<template>
  <div>
    {{ a }}
    {{ b }}
  </div>
</template>
leopiccionia commented 3 years ago

As I understand it, components with async setup should be wrapped inside Suspense component. https://v3.vuejs.org/api/sfc-script-setup.html#top-level-await https://v3.vuejs.org/guide/migration/suspense.html#introduction

iamandrewluca commented 3 years ago

@zhenhappy with suspense