前言

我们常常因为api接口调用错误而烦恼，因为测试不知道这个锅应该谁处理，或者常常因为这个问题，和后端吵架，那么今天我们彻底解决这个问题。

首先我们要知道http协议中，状态码的分类：

const STATUS_CODE = {
  100: '【后端问题】继续。客户端应继续其请求',
  101: '【后端问题】切换协议。服务器根据客户端的请求切换协议',
  201: '【后端问题】已创建。请求成功并且服务器创建了新的资源',
  202: '【后端问题】已接受。服务器已接受请求，但尚未处理',
  204: '【后端问题】无内容。服务器成功处理了请求，但没有返回内容',
  301: '【前&后端问题】资源已永久移动。请求的资源已被永久移动到新URI',
  302: '【前&后端问题】临时移动。请求的资源临时从不同的URI响应请求',
  304: '【前&后端问题】未修改。请求的资源未发生改变',
  307: '【前&后端问题】临时重定向。请求的资源临时从不同的URI响应请求',
  400: '【前端问题】客户端请求的语法错误，服务器无法理解',
  401: '【前端问题】请求要求用户的身份认证',
  403: '【后端问题】服务器理解请求客户端的请求，但是拒绝执行此请求',
  404: '【前端问题】服务器无法根据客户端的请求找到资源',
  405: '【后端问题】客户端请求中的方法被禁止',
  408: '【前&后端问题】接口响应超时',
  409: '【后端问题】请求冲突。服务器在处理请求时发生了冲突',
  410: '【后端问题】资源已永久删除',
  415: '【前端问题】不支持的媒体类型。服务器无法处理请求的格式',
  429: '【前端问题】请求过多。客户端发送的请求次数过多，超出了限制',
  500: '【后端问题】服务器内部错误，无法完成请求',
  501: '【后端问题】服务器不支持请求的功能，无法完成请求',
  502: '【后端问题】代理工作的服务器收到了无效的响应',
  503: '【后端问题】超载或系统维护,系统暂时的无法处理请求',
  504: '【后端问题】网关超时。服务器作为网关或代理时未及时从上游服务器收到响应',
  505: '【后端问题】服务器不支持请求的HTTP协议的版本'
}

TIP

有比较细的朋友已经发现，没有200，因为200是成功状态码，所以没有没必要列出来了。我们只针对错误的请求。

解决方案

通常，我们的api请求都是通过axios来发起的，那么我们可以在拦截器中做处理：

import axios from 'axios'
const service = axios.create()
service.interceptors.response.use(
  response => {
    const res = response.data
    if (res && res.code !== 0) {
      res.msg && Message.error(res.msg)
      throw res
    } else {
      return res
    }
  },
  error => {
    if (error.response) {
      const { data, config, status, request } = error.response
      const errorLog = {
        path: data.path,
        method: config.method,
        error: STATUS_CODE[status],
        responseURL: request.responseURL
        time: new Date().toLocaleString()
      }
      console.table(errorLog)
      return Promise.reject(data || new Error('data为空'))
    }
  }
)

返回效果

path	method	error	responseURL	time
/api/getUserData	GET	【后端问题】服务器内部错误，无法完成请求	https://test.com/api/getUserData	2024/09/12 14:30:45

结语

通过上面的代码，我们就可以很方便的定位到错误接口，帮助测试快速定位问题。如果大家有更好的方法，欢迎留言讨论。