如何将Nuxt 2中的useAsync + error逻辑迁移至Nuxt Bridge（useAsyncData暂不可用）

你的理解大体是对的，但其实有更优雅的方案，既能搞定404状态码的问题，又能避免后续迁Nuxt 3时大量返工，咱们一步步拆解：

先搞定404状态码的问题 #

你担心用useLazyAsyncData没法返回正确的HTTP 404状态码，但其实在Nuxt Bridge里，useContext()提供的error函数依然能在服务端设置响应状态码，还能触发你自定义的error.vue页面渲染。只要在捕获错误时正确调用它就行：

setup() {
  const { $axios, error, params } = useContext()
  const { data: foo, pending } = useLazyAsyncData('foo', async () => {
    try {
      return await $axios.$get(`...${params.value.foo}`)
    } catch (err) {
      // 这个error函数在服务端会把响应码设为404，同时渲染你的error.vue页面
      error({ statusCode: 404, message: 'Not found' })
      // 抛出错误让useLazyAsyncData捕获（可选，方便前端判断状态）
      throw err
    }
  })
  return { foo, pending }
}

这里要提一句：如果是服务端发生错误，Nuxt会自动接管页面渲染error.vue，根本不用在每个模板里写v-else-if="error"的逻辑——正好解决你说的错误页面布局不一致的问题。

减少模板修改，降低未来迁移成本 #

为了不用给每个页面都套加载/错误的模板逻辑，同时让后续迁Nuxt 3更顺畅，你可以封装一个自定义组合式函数，把useLazyAsyncData的状态逻辑包起来，尽量贴近你原来useAsync的用法：

第一步：写个复用的组合式函数 #

在composables/useAsyncWrapper.js里创建这个工具函数：

import { useLazyAsyncData, useContext } from '#app'

export function useAsyncWrapper(key, fetchHandler) {
  const { error } = useContext()
  
  const { data, pending, error: asyncError } = useLazyAsyncData(
    key,
    async () => {
      try {
        return await fetchHandler()
      } catch (err) {
        error({ statusCode: 404, message: 'Not found' })
        throw err
      }
    },
    { server: true } // 确保在服务端执行，和原来的useAsync行为保持一致
  )

  // 返回简化后的结果，和你原来的useAsync用法对齐
  return {
    data,
    isLoading: pending,
    fetchError: asyncError
  }
}

第二步：在页面里用这个函数 #

这样你的页面setup代码几乎不用改，模板也不用额外加一堆判断：

setup() {
  const { $axios, params } = useContext()
  const { data: foo } = useAsyncWrapper('foo', async () => {
    return await $axios.$get(`...${params.value.foo}`)
  })
  return { foo }
}

第三步：全局处理加载状态 #

如果需要展示加载动画，别在每个页面写v-if="pending"，直接在app.vue里全局处理：

<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <div v-if="isGlobalLoading" class="fullscreen-loader">
      <!-- 这里放你的全局加载动画 -->
      加载中...
    </div>
    <NuxtPage v-else />
  </NuxtLayout>
</template>

<script setup>
import { useNuxtApp } from '#app'
const { pending: isGlobalLoading } = useNuxtApp()
</script>

未来迁Nuxt 3时的便利 #

等你要迁Nuxt 3的时候，只需要修改这个useAsyncWrapper的内部实现，换成Nuxt 3的useAsyncData（不用再用lazy版本），页面代码和模板完全不用动：

// Nuxt 3版本的useAsyncWrapper.js
import { useAsyncData, useNuxtApp } from '#app'

export function useAsyncWrapper(key, fetchHandler) {
  const { $nuxt: { error } } = useNuxtApp()
  
  const { data } = useAsyncData(
    key,
    async () => {
      try {
        return await fetchHandler()
      } catch (err) {
        error({ statusCode: 404, message: 'Not found' })
        throw err
      }
    }
  )

  return {
    data,
    isLoading: false, // Nuxt 3的useAsyncData会在服务端完成加载，前端不用处理pending
    fetchError: null
  }
}

这样一来，你既解决了当前Bridge迁移的痛点，又给未来的Nuxt 3迁移铺好了路，不用回头改一大堆代码。

内容的提问来源于stack exchange，提问作者some-user