使用 promise 在 Angular 中实现页面加载器

Question

我想知道什么是实现功能的最佳方式，该功能负责根据某些请求切换 gif。我不想在所有 http 请求上显示它，所以我不想将它放在拦截器中 - 我想创建一个服务。

我很可能会使用如下功能：

LoaderFunction(SomeFunction())

只要启动和解决承诺，就会切换 img 或其他内容。 SomeFunction() 通常是 http 请求，它们已经有自己的承诺。

谢谢！

Answer 1

好吧，最简单 的方法是在 $http 调用自身上使用承诺。

示例：

$http.post("/", data, function() {
  initiateLoader(); // this is a function that starts the loading animation.
}).success(function (data) {
  finishLoader(); // this is a function that ends the loading animation.
}).catch(function(err) {
  finishLoader(); //so the loader also finishes on errors.
});

Answer 2

最简单的方法是使用计数信号量和。它适用于任意数量的正在进行的请求。

withLoader.count = 0;
function withLoader(fn){
     if(count === 0) initiateLoader();
     count++;
     return $q.when(fn).finally(function(){
         count--;
         if(count === 0) finishLoader();
     });
}

这将范围绑定到事件的生命周期 - 就像 C++ 中的 RAII。这会让你做到：

withLoader(someFunction);
withLoader(someFunction);
withLoader(function(){
    return $http.post(...); 
}).then(function(){
   // http request finished, like your normal `then` callback
});

加载程序将在计数器达到 0 时完成，即当所有请求完成时。

因为它是 Angular，您可能希望将 withLoader 放在它自己的服务中，并让指令自行管理加载。

使用 promise 在 Angular 中实现页面加载器

Implementing page loader in Angular using promise

loader

promise

angularjs