Nuxt构建时Axios触发429错误，如何避免构建阶段调用API？

核心解决思路 #

你的需求是仅在用户访问页面（客户端）时调用API，完全可以跳过构建阶段的请求，这是解决429错误和构建耗时问题的最直接方案。同时缓存机制可以作为辅助优化手段。

1. 如何跳过构建阶段的API请求？ #

关键是通过Nuxt提供的环境标识，判断代码执行环境，仅在客户端发起请求：

• 如果使用Options API，将请求逻辑放在mounted钩子中，并通过process.client判断：

async mounted() {
  // 仅在客户端浏览器环境执行请求
  if (process.client) {
    try {
      const response = await this.$axios.get('你的API端点')
      // 处理返回数据
    } catch (error) {
      // 客户端错误处理（比如提示用户）
    }
  }
}

• 如果使用Composition API（Nuxt 2/3），用onMounted钩子配合环境判断：

import { onMounted } from '@nuxtjs/composition-api' // Nuxt 2
// import { onMounted } from 'vue' // Nuxt 3

onMounted(() => {
  if (process.client) {
    // 发起API请求并处理逻辑
  }
})

• 注意：如果之前在asyncData或fetch钩子中写了API请求，这两个钩子会在构建/服务端渲染阶段执行，必须把这些逻辑迁移到客户端生命周期钩子中，才能避免构建阶段触发API调用。

2. 是否可以使用缓存机制？ #

缓存可以作为辅助方案，减少客户端重复请求次数，进一步降低API限流风险，但不是解决构建阶段请求问题的必要手段：

• 客户端本地缓存（用localStorage）：适合数据更新不频繁的场景，比如缓存1小时：

async mounted() {
  if (process.client) {
    const cacheKey = 'api_data_cache'
    const cacheExpiry = 3600000 // 缓存有效期1小时
    const cachedData = localStorage.getItem(cacheKey)

    if (cachedData) {
      const { data, timestamp } = JSON.parse(cachedData)
      // 未过期则使用缓存数据
      if (Date.now() - timestamp < cacheExpiry) {
        this.pageData = data
        return
      }
    }

    // 缓存过期或无缓存时发起请求
    try {
      const response = await this.$axios.get('你的API端点')
      this.pageData = response.data
      // 存入缓存
      localStorage.setItem(cacheKey, JSON.stringify({
        data: response.data,
        timestamp: Date.now()
      }))
    } catch (error) {
      // 错误处理
    }
  }
}

• Nuxt 3中可以结合useAsyncData的缓存配置，但同样要确保仅在客户端执行。

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