从$http promise中编程关闭Bootstrap UI模态框偶现失效如何解决

• $uibModal 初始化时序问题：$uibModal.open 虽然同步返回实例对象，但模态框的关闭逻辑绑定、DOM挂载是异步完成的。如果你的$http请求响应速度极快（比如本地Mock、局域网接口响应<100ms），会出现在模态框初始化完成前就调用dismiss的情况，此时关闭指令会被内部丢弃，导致后续模态框渲染完成后不会自动关闭。
• Promise 链逻辑中断：当前你只捕获了MyService.doSomething()的异常，若.then内部的业务代码抛出未捕获错误，会直接跳出Promise链，不会执行后续的dismiss逻辑。
• 脏检查未触发：如果你的服务逻辑使用了非AngularJS封装的异步API（比如原生fetch、第三方SDK回调），回调触发时没有进入AngularJS的脏检查周期，$uibModal的关闭操作依赖脏检查更新视图，会导致视图看起来没有关闭，实际实例已经被销毁。

// 封装为通用服务方法，可全局复用
function withWaitDialog(promiseGenerator, customModalConfig = {}) {
  const modalDefaultConfig = {
    templateUrl: 'waitDialog.html',
    backdrop: 'static', // 禁止点击背景关闭，避免用户提前销毁实例
    keyboard: false // 禁止ESC关闭，可根据需求调整
  };
  const waitDialog = $uibModal.open(Object.assign(modalDefaultConfig, customModalConfig));
  waitDialog.result.catch(() => {}); // 忽略模态框自身的关闭拒绝事件

  return promiseGenerator()
    .then(res => {
      waitDialog?.dismiss?.('success');
      return res;
    })
    .catch(err => {
      waitDialog?.dismiss?.('error');
      throw err;
    })
    .finally(() => {
      // 兜底关闭逻辑，无论成功失败都会执行
      waitDialog?.close?.();
      // 强制触发脏检查，确保视图更新
      if (!$rootScope.$$phase) $rootScope.$apply();
    });
}

// 业务侧调用示例
$scope.foobar = function() {
  withWaitDialog(() => MyService.doSomething())
    .then(response => {
      // 成功业务逻辑
    })
    .catch(response => {
      // 错误业务逻辑
    });
};

如果你的AngularJS版本低于1.3，不支持Promise.finally，可以把finally块内的逻辑分别复制到then和catch的末尾，效果一致。

• 检查waitDialog.html是否存在自定义变量绑定、关闭逻辑冲突，避免模态框内部作用域变量被意外修改导致关闭事件失效。
• 检查页面是否存在同时打开多个模态框的场景，避免dismiss调用到已销毁的实例，可给等待模态框添加唯一ID做实例校验。

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