Nuxt SSR环境下axios将成功响应转为错误触发栈溢出如何修复？

问题原因 #

该栈溢出问题出现在Nuxt.js搭配@nuxtjs/axios模块的SSR场景下，核心触发点有两个：

1. 响应拦截器中直接将完整response对象作为失败参数reject，未包装为标准Error实例，@nuxtjs/axios的内部逻辑会误将该response判定为可重试的正常响应，重复触发拦截器流程
2. onError钩子仅做了日志打印，未返回明确的Promise状态，导致拦截器的错误处理逻辑递归执行，最终触发调用栈溢出

修复方案 #

1. 调整响应拦截器逻辑

将需要抛出的业务错误包装为标准Error实例，避免axios内部逻辑误判，同时正常响应必须明确返回response：

$axios.onResponse((response) => {
  if (response.data.status == 500) {
    // 包装为标准Error实例，将原始响应挂载到Error上方便后续取值
    const err = new Error(response.data.message || '业务处理失败')
    err.response = response
    err.businessCode = 500
    return Promise.reject(err)
  }
  return response
})

2. 调整错误拦截器逻辑

错误处理完成后必须明确返回Promise状态，终止内部递归流程：

$axios.onError((err) => {
  console.log(err)
  // 若需要将错误透传给业务层处理，返回rejected状态
  return Promise.reject(err)
  
  // 若已在全局完成全部错误处理（如跳转登录、全局提示等），不需要业务层感知，可返回resolved状态终止错误传递
  // return Promise.resolve()
})

3. 补充fetch钩子错误捕获

SSR场景下fetch钩子抛出未捕获错误会导致服务端渲染失败，建议补充异常捕获逻辑：

async fetch () {
  try {
    await this.$axios.$get('myapi')
  } catch (err) {
    // 业务层自行处理错误，比如展示错误提示、跳转错误页
    console.error('请求失败', err)
  }
}

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