AngularJS'de bir $ http isteği nasıl iptal edilir?

AngularJS'de bir Ajax isteği verildi

$http.get("/backend/").success(callback);

başka bir istek başlatılırsa bu isteği iptal etmenin en etkili yolu nedir (örneğin, aynı arka uç, farklı parametreler).

Bu özellik, bir zaman aşımı parametresi aracılığıyla 1.1.5 sürümüne eklendi :

var canceler = $q.defer();
$http.get('/someUrl', {timeout: canceler.promise}).success(successCallback);
// later...
canceler.resolve();  // Aborts the $http request if it isn't finished.

Açısal $ http Ajax zaman aşımı özelliğiyle iptal edildiğinde Açısal 1.3.15'te çalışmaz. Bunun düzeltilmesini bekleyemeyenler için Angular'a sarılmış bir jQuery Ajax çözümü paylaşıyorum.

Çözüm iki hizmeti içerir:

• HttpService (jQuery Ajax işlevi çevresinde bir sarıcı);
• PendingRequestsService (bekleyen / açık Ajax isteklerini izler)

İşte PendingRequestsService hizmeti:

    (function (angular) {
    'use strict';
    var app = angular.module('app');
    app.service('PendingRequestsService', ["$log", function ($log) {            
        var $this = this;
        var pending = [];
        $this.add = function (request) {
            pending.push(request);
        };
        $this.remove = function (request) {
            pending = _.filter(pending, function (p) {
                return p.url !== request;
            });
        };
        $this.cancelAll = function () {
            angular.forEach(pending, function (p) {
                p.xhr.abort();
                p.deferred.reject();
            });
            pending.length = 0;
        };
    }]);})(window.angular);

HttpService hizmeti:

     (function (angular) {
        'use strict';
        var app = angular.module('app');
        app.service('HttpService', ['$http', '$q', "$log", 'PendingRequestsService', function ($http, $q, $log, pendingRequests) {
            this.post = function (url, params) {
                var deferred = $q.defer();
                var xhr = $.ASI.callMethod({
                    url: url,
                    data: params,
                    error: function() {
                        $log.log("ajax error");
                    }
                });
                pendingRequests.add({
                    url: url,
                    xhr: xhr,
                    deferred: deferred
                });            
                xhr.done(function (data, textStatus, jqXhr) {                                    
                        deferred.resolve(data);
                    })
                    .fail(function (jqXhr, textStatus, errorThrown) {
                        deferred.reject(errorThrown);
                    }).always(function (dataOrjqXhr, textStatus, jqXhrErrorThrown) {
                        //Once a request has failed or succeeded, remove it from the pending list
                        pendingRequests.remove(url);
                    });
                return deferred.promise;
            }
        }]);
    })(window.angular);

Daha sonra hizmetinizde veri yüklerken $ http yerine HttpService kullanırsınız:

(function (angular) {

    angular.module('app').service('dataService', ["HttpService", function (httpService) {

        this.getResources = function (params) {

            return httpService.post('/serverMethod', { param: params });

        };
    }]);

})(window.angular);

Daha sonra kodunuzda verileri yüklemek istersiniz:

(function (angular) {

var app = angular.module('app');

app.controller('YourController', ["DataService", "PendingRequestsService", function (httpService, pendingRequestsService) {

    dataService
    .getResources(params)
    .then(function (data) {    
    // do stuff    
    });    

    ...

    // later that day cancel requests    
    pendingRequestsService.cancelAll();
}]);

})(window.angular);

İle yapılan isteklerin iptali, $httpAngularJS'nin geçerli sürümünde desteklenmez. Bu özelliği eklemek için bir çekme isteği açıldı , ancak bu PR henüz gözden geçirilmedi, bu yüzden AngularJS çekirdeği haline getirip getirmeyeceği belli değil.

StateChangeStart üzerinde bekleyen istekleri ui-router ile iptal etmek isterseniz, şöyle bir şey kullanabilirsiniz:

// serviste

                var deferred = $q.defer();
                var scope = this;
                $http.get(URL, {timeout : deferred.promise, cancel : deferred}).success(function(data){
                    //do something
                    deferred.resolve(dataUsage);
                }).error(function(){
                    deferred.reject();
                });
                return deferred.promise;

// UIrouter yapılandırmasında

$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
    //To cancel pending request when change state
       angular.forEach($http.pendingRequests, function(request) {
          if (request.cancel && request.timeout) {
             request.cancel.resolve();
          }
       });
    });

Herhangi bir nedenle config.timeout benim için çalışmıyor. Bu yaklaşımı kullandım:

let cancelRequest = $q.defer();
let cancelPromise = cancelRequest.promise;

let httpPromise = $http.get(...);

$q.race({ cancelPromise, httpPromise })
    .then(function (result) {
...
});

Ve iptal etmek için cancelRequest.resolve (). Aslında bir isteği iptal etmez ancak en azından gereksiz yanıt almazsınız.

Bu yardımcı olur umarım.

Bu, $ http hizmetini bir iptal yöntemi ile aşağıdaki şekilde süsleyerek kabul edilen cevabı geliştirir ...

'use strict';
angular.module('admin')
  .config(["$provide", function ($provide) {

$provide.decorator('$http', ["$delegate", "$q", function ($delegate, $q) {
  var getFn = $delegate.get;
  var cancelerMap = {};

  function getCancelerKey(method, url) {
    var formattedMethod = method.toLowerCase();
    var formattedUrl = encodeURI(url).toLowerCase().split("?")[0];
    return formattedMethod + "~" + formattedUrl;
  }

  $delegate.get = function () {
    var cancelerKey, canceler, method;
    var args = [].slice.call(arguments);
    var url = args[0];
    var config = args[1] || {};
    if (config.timeout == null) {
      method = "GET";
      cancelerKey = getCancelerKey(method, url);
      canceler = $q.defer();
      cancelerMap[cancelerKey] = canceler;
      config.timeout = canceler.promise;
      args[1] = config;
    }
    return getFn.apply(null, args);
  };

  $delegate.abort = function (request) {
    console.log("aborting");
    var cancelerKey, canceler;
    cancelerKey = getCancelerKey(request.method, request.url);
    canceler = cancelerMap[cancelerKey];

    if (canceler != null) {
      console.log("aborting", cancelerKey);

      if (request.timeout != null && typeof request.timeout !== "number") {

        canceler.resolve();
        delete cancelerMap[cancelerKey];
      }
    }
  };

  return $delegate;
}]);
  }]);

BU KOD NELER YAPIYOR?

Bir isteği iptal etmek için bir "vaat" zaman aşımı ayarlanmalıdır. HTTP isteğinde herhangi bir zaman aşımı ayarlanmamışsa, kod bir "vaat" zaman aşımı ekler. (Zaten bir zaman aşımı ayarlanmışsa, hiçbir şey değiştirilmez).

Ancak, vaadi çözmek için "ertelenmiş" bir ele ihtiyacımız var. Böylece "ertelenmiş" i daha sonra alabilmemiz için bir harita kullanıyoruz. Durdurma yöntemini çağırdığımızda, "ertelenmiş" haritadan alınır ve daha sonra http isteğini iptal etmek için çözümleme yöntemini çağırırız.

Umarım bu birine yardımcı olur.

SINIRLAMA

Şu anda bu yalnızca $ http.get için çalışıyor ancak $ http.post vb. İçin kod ekleyebilirsiniz.

NASIL KULLANILIR ...

Daha sonra, örneğin durum değişikliğinde aşağıdaki gibi kullanabilirsiniz ...

rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
  angular.forEach($http.pendingRequests, function (request) {
        $http.abort(request);
    });
  });

burada birden fazla isteği işleyen bir sürüm, ayrıca hata bloğundaki hataları bastırmak için geri çağrıda iptal edilen durumu kontrol eder. (Daktilo yazısında)

kontrolör seviyesi:

    requests = new Map<string, ng.IDeferred<{}>>();

benim http olsun:

    getSomething(): void {
        let url = '/api/someaction';
        this.cancel(url); // cancel if this url is in progress

        var req = this.$q.defer();
        this.requests.set(url, req);
        let config: ng.IRequestShortcutConfig = {
            params: { id: someId}
            , timeout: req.promise   // <--- promise to trigger cancellation
        };

        this.$http.post(url, this.getPayload(), config).then(
            promiseValue => this.updateEditor(promiseValue.data as IEditor),
            reason => {
                // if legitimate exception, show error in UI
                if (!this.isCancelled(req)) {
                    this.showError(url, reason)
                }
            },
        ).finally(() => { });
    }

yardımcı yöntemler

    cancel(url: string) {
        this.requests.forEach((req,key) => {
            if (key == url)
                req.resolve('cancelled');
        });
        this.requests.delete(url);
    }

    isCancelled(req: ng.IDeferred<{}>) {
        var p = req.promise as any; // as any because typings are missing $$state
        return p.$$state && p.$$state.value == 'cancelled';
    }

şimdi ağ sekmesine bakarak, güzelce çalıştığını görüyorum. yöntemi 4 kez çağırdı ve sadece sonuncusu geçti.

Bu işlevi sözlerinize $httpekleyecek bir "dekoratör" kullanarak hizmete özel bir işlev ekleyebilirsiniz abort().

İşte bazı çalışma kodu:

app.config(function($provide) {
    $provide.decorator('$http', function $logDecorator($delegate, $q) {
        $delegate.with_abort = function(options) {
            let abort_defer = $q.defer();
            let new_options = angular.copy(options);
            new_options.timeout = abort_defer.promise;
            let do_throw_error = false;

            let http_promise = $delegate(new_options).then(
                response => response, 
                error => {
                    if(do_throw_error) return $q.reject(error);
                    return $q(() => null); // prevent promise chain propagation
                });

            let real_then = http_promise.then;
            let then_function = function () { 
                return mod_promise(real_then.apply(this, arguments)); 
            };

            function mod_promise(promise) {
                promise.then = then_function;
                promise.abort = (do_throw_error_param = false) => {
                    do_throw_error = do_throw_error_param;
                    abort_defer.resolve();
                };
                return promise;
            }

            return mod_promise(http_promise);
        }

        return $delegate;
    });
});

Bu kod, hizmete bir with_abort()işlev eklemek için angularjs dekoratör işlevini kullanır $http.

with_abort()$httphttp isteğini iptal etmenizi sağlayan zaman aşımı seçeneğini kullanır .

İade edilen söz bir abort() işlevi . Ayrıca abort()zincir vaat bile çalışır çalışır emin olmak için kodu vardır .

İşte nasıl kullanacağınıza bir örnek:

// your original code
$http({ method: 'GET', url: '/names' }).then(names => {
    do_something(names));
});

// new code with ability to abort
var promise = $http.with_abort({ method: 'GET', url: '/names' }).then(
    function(names) {
        do_something(names));
    });

promise.abort(); // if you want to abort

Varsayılan olarak aradığınızda abort() istek iptal edilir ve söz vericilerin hiçbiri çalışmaz.

Hata işleyicilerinizin true olarak adlandırılmasını istiyorsanız abort(true) .

Hata işleyicinizde özelliği kontrol ederek "hatanın" bir "iptal" olup olmadığını kontrol edebilirsiniz xhrStatus. İşte bir örnek:

var promise = $http.with_abort({ method: 'GET', url: '/names' }).then(
    function(names) {
        do_something(names));
    }, 
    function(error) {
        if (er.xhrStatus === "abort") return;
    });