前端try-catch无法捕获接口409错误，仅Network面板可见如何解决

问题原因 #

你遇到的是前端请求封装的常见问题：绝大多数前端请求工具（包括原生fetch、axios、OpenAPI自动生成的request方法）默认不会把HTTP 4xx/5xx状态码的响应作为异常抛入catch块，就算部分封装会主动抛出错误，也经常会遗漏把后端返回的响应体挂载到错误对象上，就会出现在Network里能看到错误信息、但catch里拿不到的情况。

解决方法 #

方法1：调整请求封装逻辑（最彻底） #

修改你项目里request方法的封装代码，遇到非2xx状态码抛出错误时，把后端返回的响应体、状态码等信息都挂载到错误对象上，示例封装逻辑参考：

// 仅为适配通用封装逻辑的示例，可根据你项目的request实现调整
async function request(config) {
  const response = await fetch(config.path, {
    method: config.method,
    headers: config.headers,
    body: config.body,
    // 其余配置项
  })
  if (response.ok) {
    return response.json()
  } else {
    // 把响应信息完整挂载到错误对象后再抛出
    const err = new Error('请求异常')
    err.status = response.status
    // 后端返回json格式就用json()，纯文本就用text()
    err.data = await response.json()
    throw err
  }
}

调整封装后你就可以在catch中直接读取错误信息：

catch(e){
  console.log(e.status) // 输出409
  console.log(e.data) // 输出后端返回的完整错误内容
}

如果你用的是axios封装的request，不需要额外调整封装，直接在catch中读取e.response.data即可拿到后端返回的409错误信息。

方法2：无需修改封装，主动判断响应状态 #

如果你的request方法默认返回完整response对象、且不会对非2xx状态码抛错，你可以在try块内先判断状态码再处理，不需要等待进入catch：

try{
  const response = await this.request({
    // 保留你的原有请求配置
    path: `/api/xxx/xxx/{xxx}/xx`.replace(`{${"xxx"}}`, xx(String(requestParameters.terminalId))),
    method: 'PUT',
    headers: headerParameters,
    query: queryParameters,
    body: UpdateTerminalDataPortRequestDtoToJSON(requestParameters.updateTerminalDataPortRequestDto),
  }, initOverrides);
  // 新增状态判断逻辑
  if (response.status === 409) {
    const errInfo = await response.json()
    console.log('409错误信息：', errInfo)
    // 此处添加前端错误提示逻辑
    return
  }
  // 原有正常响应的业务逻辑
}
catch(e){
  // 仅处理断网、CORS等网络层面的错误
  console.error(e)
}

异常场景排查 #

如果按照上述方法还是拿不到错误信息，需要确认后端CORS配置是否正确：如果后端没有配置Access-Control-Expose-Headers允许前端读取非2xx响应的头和体，前端会因为跨域限制无法读取错误内容，这种情况需要后端配合将该配置项改为*或者指定需要暴露的响应字段即可。

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