Come accedere a XHR in $ http con Angular?

Question

Attualmente sto cercando di implementare la funzione di caricamento con Angular. All'inizio ho usato XmlHttpRequest ma in seguito l'ho cambiato in $ http. Così ho scoperto che non potevo accedere a XmlHttpRequest per creare una barra di avanzamento con $ http. Di seguito è il mio codice. Qualche suggerimento su come creare una barra di avanzamento durante il caricamento delle immagini? Grazie.

$http({ 
      method: 'POST', 
      url: upload_url, 
      data: fd, 
      headers: {'Content-Type': undefined}, 
      transformRequest: angular.identity 
      }) 

Answer 1

Questo può servire:

  $http.post('http://url.com', {parameter1:'parameter', parameter2: 'secondparameter'}).success(function (result) { 
       console.log(result.data); 
      }).error(function(data, status, headers, config) { 
       console.log(status); 
      })); 

Answer 2

Qui il modo di ottenere oggetto XHR:

http://boylesoftware.com/blog/angular-tip-using-the-xmlhttprequest-object/

Copia/Incolla:

Normalmente, un AngularJS l'applicazione utilizza il servizio $ http ce per effettuare chiamate ai servizi di back-end. A volte, tuttavia, vorremmo avere l'accesso all'oggetto XMLHttpRequest sottostante. Posso inventare uno pochi casi d'uso, ma quello più importante è probabilmente quello di poter fare il progresso di una richiesta lunga, come un caricamento di file, nel formato . Per fare ciò, abbiamo bisogno di registrare un listener di eventi sull'oggetto XMLHttpRequest per l'evento "in corso". Sorprendentemente, il servizio $ http di Angular non espone in alcun modo l'oggetto XMLHttpRequest sottostante . Quindi, dobbiamo diventare creativi. Ecco un modo per farlo ...

L'oggetto config del servizio $ http ci consente di aggiungere intestazioni alla richiesta HTTP tramite la sua proprietà "intestazioni". Ciò significa che ad un certo punto $ http deve impostare tali intestazioni sull'oggetto XMLHttpRequest che utilizza. Il modo per farlo è utilizzare il metodo setRequestHeader di XMLHttpRequest. Quindi l'idea è di ignorare il metodo setRequestHeader sul prototipo XMLHttpRequest e utilizzare un nome di intestazione speciale per introdurre un hook. Cominciamo con questo e creare un semplice modulo angolare che esegue il metodo di sostituzione nella sua fase di configurazione:

angular.module("bsworksXHR", []).config([ 
    function() { 
     XMLHttpRequest.prototype.setRequestHeader = (function(sup) { 
      return function(header, value) { 
       if ((header === "__XHR__") && angular.isFunction(value)) 
        value(this); 
       else 
        sup.apply(this, arguments); 
      }; 
     })(XMLHttpRequest.prototype.setRequestHeader); 
    } 
]); 

Ora, quando facciamo una chiamata $ servizio HTTP, siamo in grado di aggiungere un'intestazione chiamato "XHR" con un valore di funzione che riceverà l'oggetto XMLHttpRequest come unico argomento. Ad esempio, da qualche altra parte nel applicazione:

$http({ 
    … 
    headers: { 
     … 
     __XHR__: function() { 
      return function(xhr) { 
       xhr.upload.addEventListener("progress", function(event) { 
        console.log("uploaded " + ((event.loaded/event.total) * 100) + "%"); 
       }); 
      }; 
     }, 
     … 
    }, 
    … 
}).success(…); 

Si spera, le versioni future di AngularJS comprenderà qualche modo ufficiale per accedere all'oggetto XMLHttpRequest di basso livello, anche se limitata, come ad come essere in grado di registrare gli ascoltatori di eventi o di tradurre gli eventi XMLHttpRequest in eventi angolari. Fino ad allora, sto usando l'approccio qui sopra nelle mie app.