Angular 1.5.4 $ http Fortschrittsereignis

Question

Jetzt Angular 1.5.4 ermöglicht es Ihnen schließlich, Fortschrittsereignis auf $ http-Provider zu verfolgen, aber aus irgendeinem Grund bekomme ich das $ rootScope als Antwort anstelle eines tatsächlichen Fortschritts (ich benutze es für Uploads) Informationen. Aufgrund des Mangels an Beispielen fand ich einige Tests im Angular Repo und folgte diesem, aber ohne Erfolg.

restClientInstance.post = function (requestParams) { 
    var postParams = { 
     method: "POST", 
     url: API_URL + requestParams.url, 
     headers: requestParams.headers, 
     data: requestParams.data, 
     eventHandlers: { 
      progress: function (c) { 
       console.log(c); 
      } 
     }, 
     uploadEventHandlers: { 
      progress: function (e) { 
       console.log(e); 
      } 
     } 
    }; 

    var promise = $http(postParams) 
    $rootScope.$apply(); 
    return promise; 
}; 

In beiden Fällen tröstet es $ rootScope statt der lengthComputable

Answer 1

Nun, ich endete damit, etwas zu tun und nur damit selbst umzugehen, da die XHR-Ereignisse, die $ http hinzugefügt wurden, nicht für mich funktionieren.

var xhttp = new XMLHttpRequest(); 
var promise = $q.defer(); 

xhttp.upload.addEventListener("progress",function (e) { 
    promise.notify(e); 
}); 
xhttp.upload.addEventListener("load",function (e) { 
    promise.resolve(e); 
}); 
xhttp.upload.addEventListener("error",function (e) { 
    promise.reject(e); 
}); 

xhttp.open("post",API_URL + requestParams.url,true); 

xhttp.send(requestParams.data); 

return promise.promise; 

Answer 2

Als here, in dem Versprechen, der dritte Parameter in der Dokumentation gesehen eine notify Funktion ist.

notify(value) - Bietet Aktualisierungen zum Status der Ausführung des Versprechens. Dies kann mehrmals aufgerufen werden, bevor das Versprechen entweder aufgelöst oder abgelehnt wird.

Es kann wie folgt verwendet werden:

$http(requestData) 
    .then(
     function success() { 
      console.log('success'); 
     }, 
     function error() { 
      console.log('error'); 
     }, 
     function notify() { 
      console.log('notified'); 
     } 
    ); 

Answer 3

note-Ich habe nicht mit NG 1.5.4 gearbeitet, unter dem Beispiel für die Nutzung vorhandener pre 1.5.4 APIs

---

die notify(event) API ist Teil des Objekt verschoben, wenn Sieanrufen. Ich bin mir nicht sicher, was eine praktische Umsetzung dieses in Bezug auf eine typische get/Put/Post Anruf über $http wäre. Aber wenn man es in Aktion sehen möchten, können Sie etwas tun:

einige Service-API

var mockRqst = function(){ 
    var d = $q.defer() 
    var crnt = 0 

    $off = $interval(function(){ 
     d.notify(crnt) 
     crnt += 5 

     if (crnt >= 100) 
     { 
      $interval.cancel($off) //cancel the interval callback 
      d.resolve("complete") 
     } 
    } 

    return d.promise 
}  

mit der Benachrichtigung

someService.mockRqst() 
.then(thenCallback, catchCallback, function(update){ 
    console.log("update", update) 
}) 

codepen - http://codepen.io/jusopi/pen/eZMjrK?editors=1010

Auch hier muss ich betonen, dass ich nicht ganz sicher bin, wie Sie dies in einen tatsächlichen externen http-Aufruf einbinden können.

Answer 4

Die Funktion ist jetzt gebrochen: https://github.com/angular/angular.js/issues/14436

Answer 5

In AngularJS v1.5.7 funktioniert gut. Wenn Sie die Chance haben, empfehle ich ein Upgrade!

...//formData = new FormData(); etc... 
var postParams = { 
    method: 'POST', 
    url: yourURLWS, 
    transformRequest: angular.identity, 
    uploadEventHandlers: { 
     progress: function (e) { 
        if (e.lengthComputable) { 
        $scope.progressBar = (e.loaded/e.total) * 100; 
        $scope.progressCounter = $scope.progressBar; 
        } 
     } 
    }, 
    data: formData, 
    headers: {'Content-Type': undefined } 
}; 

var sendPost = $http(postParams); //etc... 

in HTML Sie haben:

<progress id="progress" max="100" value="{{progressBar}}"></progress>{{progressCounter}}% 

Ergebnis:

progress result