notifica di elaborazione in background per richieste $ http

Question

Sto cercando un modo per "avvolgere" tutte le richieste $http in modo che possa mostrare un'immagine di gif ogni volta che l'applicazione sta elaborando. Voglio anche utilizzare la stessa soluzione per altri tipi di elaborazione in background e non solo per $http.

Il motivo per cui sto chiedendo è che devo sempre impostato la mia processingIndicator a true e poi passare di nuovo nella mia funzione success che non è elegante a tutti.

Una soluzione potenzialmente che vedo è quella di utilizzare una funzione che accetta una funzione come parametro. Questa funzione imposta processingIndicator su true, chiama la funzione e imposta processingIndicator su `false.

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

E poi

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

Questa soluzione non è molto conveniente perché ogni volta che ho bisogno di informare l'utente che qualcosa sta accadendo, ho bisogno di utilizzare questa funzione.

Sto cercando un modo per automatizzare questo processo.

Altre idee?

Successivamente modificare

Un'altra idea che ho è quello di estendere $http con la mia get, post, ecc o creare un servizio personalizzato che ha un comportamento simile. Ma ancora non molto elegante.

Answer 1

Utilizzare un intercettore. Osservare il seguente esempio ...

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'); 
    /*...*/ 
}]); 

Qui è possibile iniettare la logica centralizzata in vari punti durante il ciclo di vita di richiesta HTTP, agganciando nelle callback forniti offerti dal api. Elaborazione di qualsiasi logica di richiesta riutilizzabile di cui potresti aver bisogno: fallo qui. Controlla la parte degli intercettori di AngularJS $http docs per ulteriori informazioni.

Answer 2

Sono riuscito a utilizzare con successo AngularOverlay per la visualizzazione di un indicatore di caricamento mentre una richiesta HTTP è in sospeso. Scarica i file e segui le istruzioni e dovrebbe funzionare.