如何修改Fetch逻辑，捕获并抛出包含API返回错误对象的异常？

API返回格式 #

成功响应 #

{
    "data": [
        {
            "id": 123456,
            "name": "Last, First",
            "pin": 55555,
            "status": 1
        }
    ]
}

失败响应 #

{
"title": "Update failure",
"status": 400,
"errors": {
    "pin": [
        "The Driver PIN has already been taken."
    ],
    "status": [
        "The selected Status is invalid."
    ]
},
"detail": "Bad Request"
}

当前执行修改操作的函数代码 #

...

return fetch(url, options)
  .then((response) => {
    return response.json();
  })
  .then((data) => {
    return data;
  });

...

需求与疑问 #

这段代码能正确返回成功或失败的JSON，但希望在请求失败时抛出包含errors对象的异常。请问推荐的实现方式是什么？是否可以在第二个.then中检测data.status并抛出携带data的错误？

推荐实现方式 #

你说的在第二个.then里检测并抛出异常的方式完全可行，不过更严谨的做法是结合HTTP状态码判断，再处理返回数据，毕竟HTTP协议里非2xx状态码本身就代表请求异常。

方案一：结合HTTP状态码处理（推荐） #

先通过response.ok判断请求是否成功（状态码200-299），失败时解析错误JSON并抛出异常，成功则正常返回数据：

...

return fetch(url, options)
  .then((response) => {
    // 先判断HTTP响应是否成功
    if (!response.ok) {
      // 解析错误响应后直接抛出包含errors的对象
      return response.json().then(errorData => {
        throw errorData;
      });
    }
    // 成功则返回解析后的数据
    return response.json();
  })
  .then((data) => {
    // 可选：对成功数据做额外校验或处理
    return data;
  })
  .catch((error) => {
    // 这里可以做通用错误处理，比如打印日志
    if (error.errors) {
      console.error("字段错误详情:", error.errors);
    }
    // 重新抛出错误，让调用方继续处理
    throw error;
  });

...

方案二：直接检测返回数据中的errors字段 #

如果你的API失败响应一定会带errors字段，也可以简化成直接在解析后判断：

...

return fetch(url, options)
  .then((response) => response.json())
  .then((data) => {
    // 检测是否存在错误字段，存在则抛出
    if (data.errors) {
      throw data;
    }
    return data;
  });

...

关键说明 #

• 方案一更符合HTTP规范，能覆盖更多异常场景（比如API返回500但没有errors字段的情况）；
• 直接抛出错误数据对象的好处是，调用方捕获异常后可以直接访问errors、status等属性，不用额外解析；
• 两种方式都能满足你利用errors对象处理异常的需求，可根据API的实际返回规则选择。

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