Wie kann ich eine $ http Anfrage in AngularJS abbrechen?

Question

eine Ajax-Anfrage in AngularJS Bei

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

, was der effektivste Weg ist, diesen Antrag zu stornieren, wenn eine weitere Anforderung (gleiche Backend, verschiedene Parameter zum Beispiel) gestartet wird.

Answer 1

war diese Funktion added to the 1.1.5 release über einen Timeout-Parameter:

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

Answer 2

Die Stornierung von Anfragen mit $http wird von der aktuellen Version von AngularJS nicht unterstützt. Es gibt eine pull request opened, um diese Fähigkeit hinzuzufügen, aber diese PR wurde noch nicht überprüft, so ist es nicht klar, ob es in AngularJS Kern machen wird.

Answer 3

Angular $ http Ajax mit der Zeit Eigenschaft Cancelling nicht in Angular 1.3.15 funktioniert. Für diejenigen, die nicht darauf warten können, dass dies behoben wird, teile ich eine jQuery Ajax Lösung in Angular verpackt.

Die Lösung beinhaltet zwei Dienste an:

• Httpservice (ein Wrapper um die Funktion jQuery Ajax);
• PendingRequestsService (Verfolgt die anstehenden/offenen Anfragen Ajax)

Hier die PendingRequestsService Service geht:

(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); 

Der Httpservice-Service:

 (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); 

Später in Ihrem Dienst, wenn Sie sind Laden von Daten würden Sie den HttpService anstelle von $ http:

verwenden

(function (angular) { 

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

     this.getResources = function (params) { 

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

     }; 
    }]); 

})(window.angular); 

später im Code möchten Sie die Daten laden:

(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); 

Answer 4

Wenn Sie mit ui-Router ausstehenden Anforderungen auf stateChangeStart abbrechen möchten, können Sie so etwas wie dieses verwenden können:

// in Service

   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; 

// in UIrouter Config

$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(); 
      } 
     }); 
    }); 

Answer 5

Dies erhöht wie folgt den $ HTTP-Dienstes mit einer Abort-Methode durch die Dekoration die akzeptierte Antwort ...

'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; 
}]); 
    }]); 

WAS TUT DIESER CODE?

Um eine Anforderung abzubrechen, muss ein "Versprechen" Timeout gesetzt werden. Wenn für die HTTP-Anforderung kein Zeitlimit festgelegt ist, fügt der Code ein Zeitlimit für "Versprechen" hinzu. (Wenn ein Timeout bereits eingestellt ist, wird nichts geändert).

Um jedoch das Versprechen zu lösen, benötigen wir einen Griff auf die "zurückgestellt". Wir verwenden also eine Karte, so dass wir die "zurückgestellte" später abrufen können. Wenn wir die Methode abort aufrufen, wird die "zurückgestellte" aus der Karte abgerufen und dann rufen wir die resolve-Methode auf, um die http-Anfrage abzubrechen.

Ich hoffe, das hilft jemandem.

GRENZEN

Derzeit funktioniert dies nur für $ http.get aber Sie können Code für $ http.post hinzufügen und so weiter

WIE IST ...

Sie können dann verwenden, B. auf Zustandswechsel, wie folgt ...

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

Answer 6

Aus irgendeinem Grund funktioniert config.timeout nicht für mich. Ich habe diesen Ansatz:

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

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

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

Und cancelRequest.resolve() abzubrechen. Tatsächlich wird eine Anfrage nicht abgebrochen, aber Sie erhalten keine unnötige Antwort.

Hoffe, das hilft.

Answer 7

Hier ist eine Version, die mehrere Anfragen behandelt, prüft auch auf abgebrochenen Status im Rückruf, um Fehler in Fehlerblock zu unterdrücken. (In Maschinenschrift)

Controller-Ebene:

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

in meinem http erhalten:

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(() => { }); 
    } 

Hilfsmethoden

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

jetzt auf der Registerkarte Netzwerk suchen, sehe ich, dass es arbeitet wunderschön. Ich habe die Methode 4 mal aufgerufen und nur die letzte ging durch.