fetch失败被catch捕获后为何后续.then()仍执行？如何终止Promise链？

.catch()本身就是Promise链的一环，等价于.then(null, 错误处理回调)。核心规则很简单：如果catch的回调里没有重新抛出错误、也没有返回rejected状态的Promise，那么catch执行完成后，整个Promise就会变为fulfilled（成功）状态，后续链式调用的.then()会正常触发。
你现在的catch回调里只打印了错误日志，没有做任何向外抛错的操作，相当于把之前的网络错误、状态码错误全“吞”了。而且你的catch回调没有返回任何值，callApi在错误场景下最终返回的是一个resolve值为undefined的成功态Promise，自然外层绑定的成功回调不管请求成没成都会跑。
最小逻辑复现：

Promise.reject(new Error('请求失败'))
  .catch(err => console.log('捕获到错误:', err))
  .then(() => console.log('我还是会执行，因为catch没抛错'))

这段代码的执行逻辑和你遇到的问题完全一致。

根据你想要的错误处理收口方式，选下面两种方案即可：

方案1：catch内重新抛错，让错误沿链传递 #

如果希望请求失败时，外层的成功回调完全不执行，就在catch打完日志后重新抛出错误，让callApi在失败场景下始终返回rejected状态的Promise，外层按需挂载catch处理错误即可。
修正后的代码：

const callApi = () => {
  return fetch("http://doesnotexist.example.com")
    .then((r) => {
      if (!r.ok) {
        console.log(`status for failed call: ${r.status}`);
        throw new Error(`${r.statusText} (${r.status})`);
      }
      return r.json();
    })
    .catch((err) => {
      console.log(`call failed: ${err}`);
      // 关键：重新抛出错误，不吞错
      throw err;
    });
};

// 失败时不会进入第一个then，会走到外层catch
callApi()
  .then((data) => console.log("the call was successful", data))
  .catch(err => console.log('请求失败，执行错误分支逻辑'));

方案2：统一返回结构化结果，外层做分支判断 #

如果你想把所有错误逻辑都收口在callApi内部，不想让外层处理Promise的reject状态，可以在catch里返回约定好的错误标识，外层拿到结果后先判断请求是否成功，再执行对应逻辑。用async/await写这类逻辑会更清晰，不容易搞混Promise链的状态：

const callApi = async () => {
  try {
    const resp = await fetch("http://doesnotexist.example.com");
    if (!resp.ok) {
      console.log(`status for failed call: ${resp.status}`);
      throw new Error(`${resp.statusText} (${resp.status})`);
    }
    return {
      isSuccess: true,
      data: await resp.json()
    }
  } catch (err) {
    console.log(`call failed: ${err}`);
    return {
      isSuccess: false,
      error: err
    }
  }
};

// 外层根据返回的状态走分支
callApi().then(res => {
  if (res.isSuccess) {
    console.log("the call was successful", res.data);
  } else {
    console.log('请求失败，不执行成功逻辑')
  }
});

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