Angulaire 1.5.4 $http progrès de l'événement

Maintenant Angulaire 1.5.4, enfin, permet de suivre la progression de l'événement sur $http fournisseur, mais pour une raison que je continue à recevoir les $rootScope comme une réponse au lieu d'un progrès réel (je l'utilise pour les uploads) de l'information. En raison de l'absence d'exemples, j'ai trouvé quelques tests dans l'angle de pensions et de suivi 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, les consoles de $rootScope plutôt que de la lengthComputable

InformationsquelleAutor Duplia App | 2016-04-14
  1. 11

    Dans AngularJS v1.5.7 fonctionne très bien. Si vous avez la chance je vous recommande de 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 du déroulement de l'

    • Une autre façon est $http.post(yourURLWS, formData, postParams) (sans redondance)
    • J'ai 100% immédiatement après l'envoi de la demande malgré un chargement d'un fichier n'est pas complet.
    InformationsquelleAutor Paiminix
  3. 1

    Bien j'ai fini par faire quelque chose comme cela et juste gérer moi-même comme le XHR événements 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;
    • La progression des mises à jour comme il se doit et tout fonctionne comme il se doit, je pense que 1.5.4 est juste buggé pour le moment.
    • C'est une honte que ce n'est pas câblé correctement dans le $Api http.
    • curieux, avez-vous allé à la 1.5.4 github page et a signalé un problème?
    • peut-être que c'est et je fais quelque chose de mal?
    • oui je l'ai signalé sur leur page.
    InformationsquelleAutor Duplia App
  4. 1

    note - je n'ai pas travaillé avec NG 1.5.4, l'exemple ci-dessous est de tirer parti de l'existant avant 1.5.4 Api

    La notify(event) API est une partie de la différés objet lorsque vous appelez $q.defer(). Je ne suis pas sûr de ce que la mise en œuvre pratique de ce serait au niveau d'un type de get/put/post appel à l'aide de $http. Mais si vous voulez le voir en action, vous pouvez faire quelque chose comme ceci:

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

    à l'aide de la notification

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

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

    De nouveau, je dois souligner que je ne suis pas entièrement sûr de savoir comment vous pouvez lier cette en http externe appel.

    • Voir angulaire 1.5.4 (qui a été publié comme un jour il y a ou si) enfin ajoute que les écouteurs d'événement à $http appel que vous pouvez lier à la sous-jacentes XHR de sorte que vous pouvez écouter xhr.progrès et xhr.le téléchargement.des progrès, mais voici mon problème lorsque j'ai créé ma propre demande de téléchargement à l'aide de la plaine JS onprogress renvoie bien toutes les infos sur le fichier, mais la mise en œuvre Angulaire 1.5.4 me renvoie $rootScope où il se doit l'événement.
    InformationsquelleAutor jusopi
  5. -1

    Comme vu dans les docs ici, le troisième paramètre est une promesse est une notify fonction.

    notify(value) - fournit des mises à jour sur le statut de la promesse de l'exécution. Cela peut être appelé plusieurs fois avant que la promesse soit résolu ou rejeté.

    Il peut être utilisé comme ceci:

    $http(requestData)
    .then(
        function success() {
            console.log('success');
        },
        function error() {
            console.log('error');
        },
        function notify() {
            console.log('notified');
        }
    );
    • J'ai essayé d'en Informer déclenche jamais pour moi.
    • Je suis assez sûr informer réellement se déclenche jamais.
    • Étrange, j'ai notifier à travailler dans mon propre application, pourriez-vous mettre un peu de code dans un violon ?
    • Un violon comme dans jsfiddle.net
    • Pour $http? ou est-ce votre propre promesse wrapper pour XHR?
    • c'est même dans la $q documentation
    • Oh d'ailleurs, je n'ai pas parler de son le téléchargement du fichier progrès pas seulement une demande de progrès.
    • Bien que la documentation ne va jamais réellement à vous montrer un exemple avec la notification, je suis sûr que cela n'a jamais travaillé avec l'upload de fichiers.
    • informer est la Promesse de l'API, et non pas $http

    InformationsquelleAutor Martijn Welker