fetch请求失败时如何获取服务器错误对象并按预期抛出异常

你的核心需求是在HTTP响应状态非成功（!response.ok）时，把服务器返回的error对象中的message传递到catch块中，以下是符合你最初思路（在第一个then中判断并throw）的实现方式：

问题根源 #

你最初的代码中直接throw new Error(response)无效，因为response是Response对象，Error构造函数会把它转为字符串[object Response]，无法获取服务器返回的错误内容。必须先解析响应体，再抛出包含正确错误信息的异常。

实现代码 #

fetch(openAIURL, {
  method: "POST",
  headers: myHeaders,
  body: JSON.stringify(fetchOptions),
})
.then((response) => {
  if (!response.ok) {
    // 先解析服务器返回的错误响应体
    return response.json()
      .then(errorData => {
        // 抛出包含服务器错误message的Error
        throw new Error(errorData.error?.message || '请求处理失败');
      })
      .catch(() => {
        // 兼容服务器返回非JSON格式错误的情况
        throw new Error(response.statusText || '未知错误');
      });
  }
  // 响应正常时解析返回数据
  return response.json();
})
.then((data) => {
  // 处理成功响应逻辑
})
.catch((error) => {
  aiConversation.value = `抱歉，当前请求出现问题。${error.message}`;
  console.error('Fetch操作出错:', error);
});

逻辑说明 #

1. 当response.ok为false时，先调用response.json()解析服务器返回的错误内容；
2. 解析成功后，取出errorData.error.message作为错误信息抛出；
3. 如果解析JSON失败（比如服务器返回纯文本错误），则降级使用response.statusText作为错误信息；
4. 正常响应时，继续解析并返回数据到下一个then；
5. catch块中可直接通过error.message获取服务器返回的错误信息。

和你现有方案的区别 #

你更新后的方案是先解析所有响应，再判断data.error，适用于服务器无论成功失败都返回JSON格式的场景。而上述实现更贴合Fetch的常规错误处理逻辑：先区分HTTP状态错误（如400、500等），再处理业务层面错误，逻辑分层更清晰。

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