web-dev-qa-db-fra.com

Angular 1.5.4 $ événement de progression http

Maintenant, Angular 1.5.4 vous permet enfin de suivre l’événement progress sur le fournisseur $ http, mais pour une raison quelconque, je reçois toujours le message $ rootScope comme réponse plutôt que comme une progression réelle (je l’utilise pour les téléchargements). . Faute d’exemples, j’ai trouvé quelques tests dans le repo Angular et je les ai suivis, mais sans succès.

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;
};

Dans les deux cas, il consomme $ rootScope plutôt que le lengthComputable 

javascriptangularjshttpprogress
8
Duplia App

Eh bien, j’ai fini par faire quelque chose comme cela et je me suis débrouillé seul, car les événements XHR ajoutés à $ http ne fonctionnent pas pour moi.

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;
1
Duplia App

Dans AngularJS v1.5.7 fonctionne bien. Si vous avez la chance, je recommande la mise à niveau!

...//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...

en HTML vous avez:

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

Résultat:

résultat de l'avancement

10
Paiminix

La fonctionnalité est interrompue pour l'instant: https://github.com/angular/angular.js/issues/14436

2
sebastiannm

note - Je n'ai pas travaillé avec NG 1.5.4, l'exemple ci-dessous permet de tirer parti des API antérieures à la version 1.5.4}

L'API notify(event) fait partie de l'objet différé lorsque vous appelez $q.defer(). Je ne suis pas sûr de ce qu’une implémentation pratique de ce serait en termes d’un appel typique get/put/post via $http. Mais si vous voulez le voir en action, vous pouvez faire quelque chose comme ceci:

une API de service 

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
}

en utilisant la notification 

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

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

Encore une fois, je dois souligner que je ne suis pas tout à fait sûr de savoir comment lier cela à un véritable appel http externe. 

1
jusopi