使用Fetch API时无法捕获错误的技术咨询

我是编程新手，正在尝试实现下载进度功能，以下是我的代码：

let btn = document.querySelector("#img");
btn.addEventListener("click", loadimage);
function loadimage() {
  fetch("https://reqres.in/invalid-url")
    .then(async (res) => {
      let contLength = res.headers.get("content-length");
      let reader = res.body.getReader();
      let downloaded_data = 0; 
      while (true) {
        const { done, value } = await reader.read();
        if (done) {
          console.log("completed");
          break;
        }
        downloaded_data += value.length;
        console.log(downloaded_data);
      }
    })
    .catch(function (err) {
      console.log("catch block");
      console.log(err);
    });
}

我遇到了如下错误，但该错误未被catch块捕获：

GET https://reqres.in/invalid-url 404
6939
completed

为什么明明出现了错误，then块中的函数仍会被执行？我尝试过不同的API，结果都是如此。

这是因为fetch API的设计逻辑：它只有在发生网络层面的错误（比如断网、域名解析失败）时才会触发Promise的reject，进而进入catch块。而像404、500这类HTTP状态码错误，fetch会认为请求已经成功完成（服务器已返回响应），所以会进入then块执行后续逻辑。

要捕获这类HTTP错误，你需要手动在then块里检查响应状态：

• 用res.ok属性：状态码在200-299范围内时返回true，否则为false
• 或直接判断res.status，排除4xx、5xx类状态码

修改后的代码示例：

let btn = document.querySelector("#img");
btn.addEventListener("click", loadimage);
function loadimage() {
  fetch("https://reqres.in/invalid-url")
    .then(async (res) => {
      // 先检查HTTP状态是否正常
      if (!res.ok) {
        throw new Error(`HTTP错误：${res.status}`); // 手动抛出错误，触发catch块
      }
      let contLength = res.headers.get("content-length");
      let reader = res.body.getReader();
      let downloaded_data = 0; 
      while (true) {
        const { done, value } = await reader.read();
        if (done) {
          console.log("completed");
          break;
        }
        downloaded_data += value.length;
        console.log(downloaded_data);
      }
    })
    .catch(function (err) {
      console.log("catch block");
      console.log(err);
    });
}

这样当请求返回404时，代码会手动抛出错误，进而触发catch块执行，就能捕获到HTTP错误了。

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