迁移至Nuxt Bridge：如何替代@nuxtjs/composition-api中的useFetch？

你可以通过useLazyAsyncData来实现和原useFetch完全一致的批量请求加载状态控制，具体实现如下：

const { state: userState, getUserList } = useUserList()
const { state: groupState, getGroupList } = useGroupList()    
// ...

// 用useLazyAsyncData替代useFetch
const { pending: fetchPending } = useLazyAsyncData('batch-fetch', async () => {
  await Promise.all([
    getUserList(),
    getGroupList(),
    // ... 其他需要并行执行的请求
  ])
})

关键说明： #

• useLazyAsyncData是Nuxt Bridge兼容的API，它返回的pending状态可直接替代原代码中的fetchState.pending（你也可以保持原变量名习惯，解构时写成const { pending: fetchState } = ...，但更建议用fetchPending这类直观命名）。
• 第一个参数'batch-fetch'是该异步请求的唯一标识key，用于Nuxt的缓存机制，可根据实际场景自定义命名。
• 如果需要处理错误，还可以解构出error属性：

  const { pending: fetchPending, error } = useLazyAsyncData('batch-fetch', async () => {
    await Promise.all([
      getUserList(),
      getGroupList(),
      // ...
    ])
  })
  

• 原useFetch中的逻辑可完全平移到useLazyAsyncData的回调函数中，包括Promise.all并行请求的写法。

之后你就能像之前一样，通过fetchPending控制加载器显示，直到所有请求完成。

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