Angular 1.6 ES6中Promise的.finally()执行顺序错乱问题求助

首先得明确：Angular 1.6的$q Promise链要保证每个.then()回调都返回后续的Promise（或者值），否则链会提前终止，导致.finally()在未完成所有异步操作时就执行。

常见错误场景 #

假设你的代码类似这样（这是导致问题的典型写法）：

// 模拟异步任务
const fetchData = () => {
  return $q.resolve('初始数据');
};

fetchData()
  .then(data => {
    console.log('第一步结果:', data);
    // 这里直接嵌套then，但没有返回这个内部Promise
    fetchData().then(secondData => {
      console.log('第二步结果:', secondData);
    });
  })
  .finally(() => {
    console.log('finally执行了');
  });

这段代码里，第一个.then()没有返回内部的fetchData() Promise，所以Promise链认为第一个then已经完成，直接跳到.finally()，导致finally在第二步异步操作完成前就执行了。

正确的调整方式 #

你需要在每个.then()中返回后续的Promise，让整个链保持连贯：

方式1：链式返回Promise #

fetchData()
  .then(data => {
    console.log('第一步结果:', data);
    // 返回内部的Promise，让链等待它完成
    return fetchData();
  })
  .then(secondData => {
    console.log('第二步结果:', secondData);
    // 如果还有后续异步操作，继续返回对应的Promise
    return fetchData();
  })
  .finally(() => {
    console.log('finally执行了');
  });

这样整个链会依次执行每个异步任务，.finally()会在所有任务完成后才触发。

方式2：结合错误处理的完整链 #

如果你的业务逻辑需要处理错误，也要确保.catch()被纳入链中，.finally()放在链的最后：

fetchData()
  .then(data => {
    console.log('第一步结果:', data);
    return $q.reject('模拟异步失败'); // 模拟错误场景
  })
  .catch(error => {
    console.log('捕获错误:', error);
    return $q.resolve('错误处理完成'); // 可选：返回新Promise让链继续执行
  })
  .finally(() => {
    console.log('finally执行了'); // 无论成功或失败都会执行
  });

验证结果 #

调整后运行代码，控制台的输出顺序应该是：

第一步结果: 初始数据
第二步结果: 初始数据
finally执行了

而不是提前出现finally执行了的输出。

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