如何通过Fetch处理API返回的错误响应（含400错误）

你的问题核心在于：fetch不会把HTTP错误状态码（比如400）当成Promise的reject，只有网络故障才会触发catch，而且你第一个then直接返回了response.json()，导致后续then只能拿到解析后的JSON数据，再也访问不到原response对象的ok属性了。

下面是理想的处理方案，既能拿到成功响应数据，也能捕获并解析400错误的JSON信息：

function handleSubmit() {
    fetch(`/api/v1/teams`, {
      body: JSON.stringify({
        name: nameRef.current.value
      }),
      method: 'POST',
      headers: {
        Authorization: `Bearer ${token}`,
        'content-type': 'application/json'
      }
    })
    .then(response => {
      // 先判断响应状态是否正常
      if (response.ok) {
        return response.json(); // 正常则返回解析后的JSON
      }
      // 异常状态下，先解析错误响应的JSON，再抛出异常
      return response.json().then(errorData => {
        throw errorData; // 直接抛出错误数据，方便后续使用
      });
    })
    .then(data => {
      // 这里处理正常响应的数据
      console.log('请求成功:', data);
    })
    .catch(error => {
      // 这里捕获所有错误：包括网络错误、400等HTTP错误
      console.error('请求失败:', error);
      // 可以根据错误数据做具体处理，比如提示用户名称重复等
    });
  }

关键逻辑说明： #

• 第一个then先检查response.ok（对应状态码200-299），正常流程继续解析JSON
• 遇到400这类错误状态时，先解析响应里的错误JSON，再通过throw把错误抛到catch块
• 最后用catch统一处理所有错误场景，不管是网络问题还是后端返回的业务错误

这样就能完美解决你无法读取response.ok以及无法获取400错误信息的问题。

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