Fetch返回的Promise无法正常解析：Redux异步API调用问题

先帮你梳理几个最可能导致这个问题的点，你可以一步步排查：

1. fetchAPI内部未正确处理HTTP响应状态 #

这是最容易踩的坑！原生fetch API有个特殊特性：只有网络层面的错误（比如断网、跨域失败）才会触发Promise的reject；但如果后端返回404、500、401这类HTTP错误状态码，fetch依然会resolve这个Promise，只是返回的response对象的ok属性为false。

如果你的fetchAPI是这么实现的：

function fetchAPI(endpoint, method, headers, body) {
  return fetch(endpoint, { method, headers, body })
    .then(response => response.json());
}

那即使后端返回错误，代码依然会走到then块，而不会进入catch，看起来就像Promise解析异常。

修复方式：在fetchAPI里先校验响应状态，把HTTP错误转为Promise reject：

function fetchAPI(endpoint, method, headers, body) {
  return fetch(endpoint, { method, headers, body })
    .then(response => {
      if (!response.ok) {
        throw new Error(`请求失败：状态码 ${response.status}`);
      }
      return response.json();
    });
}

2. POST请求的Body格式不匹配 #

你设置了Content-Type: application/x-www-form-urlencoded，但传的body是null。虽然部分后端接口允许POST请求不带body，但如果后端期望接收表单格式的参数，就会返回错误。另外你把RequestNo放在了URL查询参数里，这和POST请求的常规用法不符（通常POST参数放在body中），也可能导致后端无法正确解析请求。

调整建议：如果后端支持，把参数放到body里，用URLSearchParams构造符合格式的body：

export function detailedView(request,token) { 
  let endpoint = 'api/v1/cbn/inventory/GetDetailRequest'; 
  let header = { 
    "Content-Type": "application/x-www-form-urlencoded", 
    "Authorization": "Bearer "+ token 
  };
  // 构造表单格式的body
  let body = new URLSearchParams({ RequestNo: request['RequestNo'] });
  return dispatch => { 
    return fetchAPI(endpoint,'POST', header, body) 
      .then((json) => { 
        dispatch(receiveDetails()); 
      }) 
      .catch((error) => { 
        console.error('请求出错:', error);
      })
  }
}

3. Token或请求头格式错误 #

检查token是否有效、是否过期，以及Authorization头的格式是否正确：确保Bearer和token之间有且仅有一个空格，没有多余的字符。你可以在浏览器Network面板里查看这个请求的请求头，确认Authorization字段是否正确。

4. 跨域或网络配置问题 #

打开浏览器开发者工具的Network面板，查看这个请求的状态：

• 如果是OPTIONS请求失败，说明存在跨域问题，需要后端配置CORS允许你的前端域名访问；
• 如果请求状态是failed或canceled，可能是网络问题、接口地址拼写错误，或者后端服务未启动。

最后，优先通过Network面板确认请求的实际状态和响应内容，这是最直接的排查方式！

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