使用Fetch调用.NET API无法获取BadRequest错误信息的求助

问题根源 #

1. 响应体流仅能读取一次：原代码中handleErrors函数调用response.text()读取响应体后，后续链式调用里的response.text()又尝试读取同一流，直接触发body stream already read错误。
2. 错误处理未正确返回Promise：handleErrors里的response.text().then(...)没有返回Promise，函数会立即返回原始响应对象，导致后续流程继续执行，同时抛出的错误变成未捕获的Promise异常。

修正方案 #

1. 重构错误处理函数 #

修改handleErrors，让它返回Promise，在响应状态异常时读取错误文本并抛出，确保后续catch能捕获到正确的错误信息：

function handleErrors(response) {
  if (!response.ok) {
    // 返回读取错误文本的Promise，抛出包含错误信息的Error实例
    return response.text().then(text => {
      throw new Error(text);
    });
  }
  return response;
}

2. 调整Fetch调用链 #

确保链式调用正确处理Promise，同时注意请求体格式要匹配API的[FromForm]要求（和jQuery一致，使用FormData或application/x-www-form-urlencoded格式）：

function fetchdata() {
  fetch(url, {
    method: "POST",
    body: postData, // 若postData是普通对象，需转为FormData或x-www-form-urlencoded字符串
    headers: {
      // 若使用普通对象序列化，需添加此头：
      // 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
    }
  })
  .then(handleErrors)
  .then(response => response.text())
  .then(result => dosomething())
  .catch(error => console.log(`Error from api message : ${error.message}`));
}

提示：如果postData是普通JavaScript对象，可通过new URLSearchParams(postData).toString()转为符合要求的字符串，或者直接使用FormData对象，否则API的[FromForm]无法正确解析参数。

3. 可选：改用async/await写法（更简洁） #

使用async/await可以避免链式调用的嵌套，错误处理更直观：

async function fetchdata() {
  try {
    const response = await fetch(url, {
      method: "POST",
      body: postData
    });
    if (!response.ok) {
      const errorText = await response.text();
      throw new Error(errorText);
    }
    const result = await response.text();
    dosomething();
  } catch (error) {
    console.log(`Error from api message : ${error.message}`);
  }
}

为什么jQuery能正常工作？ #

jQuery的$.ajax内部封装了响应处理逻辑，会自动识别错误状态的响应，直接在error回调中提供xhr.responseText，无需开发者手动处理响应体的读取和流的复用问题。

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