为何无需await关键字即可访问Nuxt3中useFetch的返回值？

Nuxt3的useFetch返回的是个特殊的Promise实例——它在标准Promise的基础上，额外挂载了data、pending、error、refresh这些响应式属性（都是Ref对象），这就是你不用await也能直接解构的核心原因。

具体细节： #

• Nuxt对useFetch的返回值做了特殊封装，让Promise本身就承载了请求的响应式状态。所以哪怕不写await，直接解构这个Promise对象，也能拿到那些挂载在它身上的属性。
• 这些属性都是响应式的，会跟着请求状态自动变化：比如请求还在处理时pending.value是true，请求完成后data.value会填充返回结果，pending.value也会同步变成false。

两种写法的差异： #

1. 不带await的写法：

   const { data, pending, error, refresh } = useFetch('...')
   

   解构出来的是Promise上的响应式Ref，要获取实际值需要用.value（Vue模板中可以省略），页面会跟着请求状态自动更新。

2. 带await的写法：

   const { data, pending, error, refresh } = await useFetch('...')
   

   await会等待Promise执行完成，此时返回的对象里的属性还是那些，但data.value已经是请求完成后的最终结果，pending.value直接为false。这种写法适合必须等请求结束后才能执行后续逻辑的场景。

为啥要返回Promise？ #

就是为了兼顾两种使用场景：既支持用await做异步流程控制，又能直接解构响应式属性满足Vue的响应式渲染需求，一举两得。

内容的提问来源于stack exchange，提问作者hotari