Fetch请求返回403时无法获取响应状态的问题求助

问题根源 #

你当前的代码逻辑是先尝试把响应解析为JSON，再返回包含状态和数据的对象。但当接口返回403且响应是HTML时，response.json()会抛出解析错误，进入catch块后只打印日志却没有返回值，导致整个fetch调用最终返回undefined，后续访问response.status自然会报错。

修复后的代码 #

const response = await fetch(
  // Fetch infos
).then(fetchResponse => {
  // 先判断响应状态，再选择解析方式
  if (fetchResponse.status >= 200 && fetchResponse.status < 300) {
    return fetchResponse.json().then(data => ({
      status: fetchResponse.status,
      data
    }));
  } else {
    // 非成功状态，解析响应文本（HTML）并保留状态码
    return fetchResponse.text().then(html => ({
      status: fetchResponse.status,
      data: html
    }));
  }
}).catch(err => {
  console.log(err);
  // 兜底返回包含状态的对象，避免出现undefined
  return { status: 500, data: null };
});

if (response.status === 403) {
  // Stuff
}

关键优化点 #

• 先判断状态再解析：不要上来就调用json()，先根据status或ok属性判断响应是否成功，再选择对应的解析方法（成功用json()，失败用text()处理HTML）。
• 保证Promise链有返回值：每个分支（成功、失败、catch）都返回一个包含status的对象，确保后续代码不会拿到undefined。
• 明确错误兜底：即使出现意外解析错误，也返回一个默认的状态对象，避免程序崩溃。

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