javascript - 计算 angularjs 中未决的 $q promise

Question

我正在开发一个复杂的 angularjs 应用程序。复杂的意思是单个 View 可以从代码的不同位置查询多个不同的数据源，例如页面部分 Controller 或指令 Controller 。有时，其中一些请求可能需要更长的时间来解决，从而使 View 处于某种无效状态。我希望能够显示某种“数据加载”横幅并禁用用户与 View 的交互，直到所有 promise 都已解决。这适用于使用 $q.all() 函数的简单屏幕。但是，应用程序的构建方式更多是以业务逻辑为中心，而不是以数据源为中心。因此，对于更复杂的屏幕，将不会有一个地方可以自然地访问所有做出的 promise 。在代码中创建这样的地方似乎很麻烦。

我想出了这个解决方案:

angular.module('myApp').service('qConfigurer', function ($q) {
    var pending = 0;
    var origDefer = $q.defer;

    $q.defer = function() {
        pending++;
        var result = origDefer.apply(arguments);

        var origResolve = result.resolve;
        var origReject = result.reject;

        result.resolve = function() {
            pending--;
            return origResolve.apply(arguments);
        };

        result.reject = function() {
            pending--;
            return origReject.apply(arguments);
        };

        return result;
    };

    $q.pending = function() {
        return pending;
    };

    return {};
});

是否有更少的 hacky 来实现同样的目标？

Answer 1

您正在做的是修改全局状态，并将更改修改为 $q ，这种 AOP 很容易给第三方模块插件带来问题，我认为这是危险的，它不会让你自己改变范围，更不用说速度损失了。

我认为更好的

在我看来，您真正想要的是一种进行资源管理的方法，一种 try(resource)来自 Java，using(来自 C# 或 with来自 Python。不幸的是，唯一具有此功能的 promise 实现是 Bluebird，我们在这里使用 $q，所以让我们做一个 :)

因此，我们想要一个作用于 promise 范围的函数，无论结果如何，从计数器中减少一个 - 在我们的例子中，我们的资源形成一个 semaphore .

function loading(fn){  // takes a function that returns a promise, put in a service
      var args = Array.prototype.slice.call(arguments,1);
      return $q.when().then(function(){
          loading.counter++; // signal the scope somehow, either by having the counter
                             // on the scope and accepting it as a param, by a watcher or
                             // with an emit
      }).then(function(){
          return fn.apply(null, args); // can add context param if you want for `this`
      }).finally(function(){
          loading.counter--; // signal just like with the above
      });
}
loading.counter = 0;

然后，用法变为:

 // you can use it like this
 loading(function(){
     return myService.apiCall(...);
 }).then(function(result){
      $scope.a = result;
 });
 // or like this
 loading(myService.apiCall,...).then(function(result){
     $scope.b = result;
 });

如果您将显示/隐藏逻辑、事件 Hook 、作用域变量或输入参数放入加载函数中(我将其保留为个人喜好，只需做点什么它达到零，当它达到一个时) - 它将显示/隐藏加载屏幕。