如何将Nuxt 2中的Axios请求代码迁移至Nuxt 3的useFetch方法？

没问题，我帮你把这段Nuxt 2的代码完美迁移到Nuxt 3的useFetch写法，下面是转换后的完整代码，同时我会拆解关键的迁移要点：

转换后的完整代码 #

<script setup>
// 获取路由对象和运行时配置
const route = useRoute()
const config = useRuntimeConfig()

// 并行发起所有API请求，大幅提升加载效率
const [countryDataRes, allDestRes, allSubDestRes, allToursRes] = await Promise.all([
  useFetch(`${config.public.backendapi}/dests/getcountry/${route.query.countryid}`),
  useFetch(`${config.public.backendapi}/dests/getmaindests?limit=5000`),
  useFetch(`${config.public.backendapi}/dests/getsubdests?limit=5000`),
  useFetch(`${config.public.backendapi}/tours/gettours?limit=10000`)
])

// 定义响应式变量，对应原Nuxt 2中的data和asyncData返回值
const form = countryDataRes.data.value
const allDestinations = allDestRes.data.value?.results || []
const allSubDestinations = allSubDestRes.data.value?.results || []
const allTours = allToursRes.data.value?.results || []
</script>

关键迁移要点说明 #

1. 切换到<script setup>语法：
   Nuxt 3推荐使用组合式API的<script setup>，它更简洁，定义的变量会自动暴露给模板，不需要像Nuxt 2那样手动return。

2. 环境变量的正确获取方式：
   Nuxt 3中不再直接使用process.env（客户端无法访问），而是通过useRuntimeConfig()获取。你需要先在nuxt.config.ts中配置公开的环境变量：

   export default defineNuxtConfig({
     runtimeConfig: {
       public: {
         backendapi: process.env.BACKENDAPI // 从.env文件读取你的后端API地址
       }
     }
   })
   

3. 路由参数的获取：
   用useRoute()替代Nuxt 2中asyncData的route参数，它会返回当前路由的响应式对象，直接访问route.query.countryid即可拿到参数。

4. 并行请求优化：
   原代码中四个API请求是串行执行的（一个接一个await），现在用Promise.all并行发起所有请求，能显著减少页面加载时间。

5. 安全的数据处理：
   使用?.可选链操作符和|| []默认值，避免数据未加载完成时出现Cannot read property 'results' of undefined的报错，确保页面稳定性。

6. 错误处理（可选）：
   如果需要处理API请求失败的情况，可以利用useFetch返回的error对象：

   if (countryDataRes.error.value) {
     console.error('获取国家数据失败:', countryDataRes.error.value)
     // 这里可以添加错误提示逻辑
   }
   

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