Powiadomienie o przetwarzaniu w tle dla żądań $ http

Question

Szukam sposobu na "zawinięcie" wszystkich żądań $http, aby móc wyświetlać obraz gif za każdym razem, gdy aplikacja wykonuje pewne przetwarzanie. Chcę również użyć tego samego rozwiązania do innego przetwarzania w tle, a nie tylko $http.

Powodem dlaczego pytam jest to, że zawsze trzeba ustawić mój processingIndicator do true a następnie przełączyć się z powrotem w moim success funkcji, która nie jest elegancki w ogóle.

Jednym potencjalnie rozwiązaniem, które widzę, jest użycie funkcji, która przyjmuje funkcję jako parametr. Ta funkcja ustawi processingIndicator na true, wywoła funkcję, a następnie ustawi ponownie processingIndicator na "false".

function processAjaxRequestSuccessFn(fooFn){ 
    // display processing indicator 
    fooFn(); 
    // hide processing indicator 
} 

A potem

$http.get(...).then(processAjaxRequestSuccessFn, processAjaxRequestErrorFn) 

To rozwiązanie nie jest bardzo wygodne, ponieważ za każdym razem muszę powiadomić użytkownika, że ​​coś się dzieje, muszę korzystać z tej funkcji.

Szukam sposobu automatyzacji tego procesu.

Jakieś inne pomysły?

Później edit

Inny pomysł mam jest rozszerzenie $http z moim get, post, itd. Albo utworzyć usługę niestandardową, która ma podobne zachowanie. Ale wciąż niezbyt elegancko.

Answer 1

Użyj przechwytywacza. Zaobserwować następujący przykład ...

app.factory('HttpInterceptor', ['$q', function ($q) { 
    return { 
     'request': function (config) { 
      /*...*/ 
      return config || $q.when(config); // -- start request/show gif 
     }, 
     'requestError': function (rejection) { 
      /*...*/ 
      return $q.reject(rejection); 
     }, 
     'response': function (response) {  // -- end request/hide gif 
      /*...*/ 
      return response || $q.when(response); 
     }, 
     'responseError': function (rejection) { 
      /*...*/ 
      return $q.reject(rejection); 
     } 
    }; 
}]); 

---

app.config(['$httpProvider', function ($httpProvider) { 
    $httpProvider.interceptors.push('HttpInterceptor'); 
    /*...*/ 
}]); 

Tutaj można wstrzykiwać scentralizowaną logikę w różnych momentach cyklu życia żądania HTTP, zaczepiając na dostarczonych callbacków oferowanych przez API. Tworzenie logiki żądań wielokrotnego użytku, które możesz potrzebować - po prostu zrób to tutaj. Sprawdź część przechwytującą w AngularJS $http docs, aby uzyskać więcej informacji.

Answer 2

Udało mi się użyć AngularOverlay do wyświetlania wskaźnika ładowania, gdy oczekujące jest żądanie http. Pobierz pliki i postępuj zgodnie z instrukcjami, które powinny działać.