Axios发送请求前如何校验API端点是否存在？Vue项目404报错处理

报错根因 #

Axios默认会对状态码不在2xx范围的请求抛出异常，禁用banner后接口返回404状态码，没有做错误捕获的话就会在控制台抛出异常。

快速修复方案 #

给单个请求添加错误捕获即可避免控制台报错，同时识别404场景做业务兼容，两种常用写法：

1. async/await + try/catch 写法

async get_banner(id:number) : Promise<any> {
  try {
    return await global.axios.get(`${process.env.VUE_APP_DOMAIN}/banners/${id}`)
  } catch (err: any) {
    // 匹配404状态返回自定义结果，上层可直接判断data是否为空处理逻辑
    if (err.response?.status === 404) {
      return { data: null }
    }
    // 非404的其他错误继续抛出，不影响原有异常处理逻辑
    throw err
  }
}

2. Promise 链式 catch 写法

async get_banner(id:number) : Promise<any> {
  return global.axios.get(`${process.env.VUE_APP_DOMAIN}/banners/${id}`)
    .catch(err => {
      if (err.response?.status === 404) return { data: null }
      throw err
    })
}

行业最佳实践 #

• 全局统一拦截处理：给Axios实例配置响应拦截器，统一处理404、401、500等通用HTTP状态码，避免每个请求重复写捕获逻辑，示例配置：

global.axios.interceptors.response.use(
  response => response,
  error => {
    switch (error.response?.status) {
      case 404:
        console.warn('资源不存在:', error.config.url)
        // 按需做全局提示或返回空数据
        return Promise.resolve({ data: null })
      case 401:
        // 未授权跳转登录逻辑
        window.location.href = '/login'
        return Promise.reject(error)
      case 500:
        // 服务端错误全局提示
        alert('服务异常，请稍后重试')
        return Promise.reject(error)
      default:
        return Promise.reject(error)
    }
  }
)

• 优先使用业务状态码标识：更规范的接口设计不会在资源禁用/不存在时返回404，而是保持200HTTP状态，通过响应体中的自定义业务码（比如code: 40001标识资源不存在）做状态判断，减少前端HTTP异常处理的复杂度，也便于后续扩展不同业务异常的处理逻辑。
• 非必要不做URL预检：如果确实需要提前判断URL有效性，可以先发送HEAD请求做预检，但该方案会额外增加一次请求开销，仅在资源体积大、请求成本高的场景推荐使用，普通业务场景直接捕获404即可。

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