दिलचस्प पोस्ट
सफारी / क्रोम (वेबकिट) – iframe ऊर्ध्वाधर स्क्रॉलबार छुपा नहीं जा सकता जावास्क्रिप्ट में कितना खतरनाक है, वास्तव में, अपरिभाषित करने के लिए अधिलेखित नहीं है? JPA OneToMany बच्चे को नहीं हटा रहा है उपयोगकर्ता को पासवर्ड बचाने के लिए कैसे संकेत मिलता है? कैसे एक सरणी के पते सी में इसके मूल्य के बराबर है? धीमापन पाया जब बेस 64 छवि का चयन करें और डेटाबेस से सांकेतिक शब्दों में बदलना सिंक्रनाइज़ ब्लॉक के बजाय सिंक्रनाइज़ किए गए विधि का उपयोग करने के लिए एक फायदा है? स्थानीय स्टोरेज में मैं एक सरणी कैसे संग्रहीत करूं? जावा स्विंग; दो वर्गों, जहां बयान और नई कार्रवाई सूची में डाल करने के लिए? # -लिंक पर क्लिक करते समय खिड़की से ऊपर की तरफ से बचें पर्ल, पायथन, एडब्ल्यूके और एसएडी के बीच अंतर क्या हैं? उद्देश्य सी NSString * संपत्ति गिनती अजीबता बरकरार रखती है इवेंट हैंडलर्स के नाम के लिए रीशरपर सम्मेलनों जावा में छवि का आकार बदलना स्थिर विधि विरासत के लिए सही विकल्प क्या है?

AngularJS में $ http अनुरोध को कैसे रद्द करें?

AngularJS में एक अजाक्स अनुरोध को देखते हुए

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

यदि दूसरा अनुरोध लॉन्च किया गया है तो उसी अनुरोध को रद्द करने का सबसे प्रभावी तरीका क्या है (वही बैकेंड, उदाहरण के लिए अलग-अलग पैरामीटर)

वेब के समाधान से एकत्रित समाधान "AngularJS में $ http अनुरोध को कैसे रद्द करें?"

यह सुविधा 1.1.5 रिलीज में एक टाइमआउट पैरामीटर के माध्यम से जोड़ा गया था:

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

$http साथ जारी किए गए अनुरोधों को रद्द करना AngularJS के वर्तमान संस्करण के साथ समर्थित नहीं है इस क्षमता को जोड़ने के लिए एक पुल का अनुरोध खोला गया है लेकिन इस जनसंपर्क की अभी तक समीक्षा नहीं की गई थी, इसलिए इसे स्पष्ट नहीं किया गया है कि यह अंगुलरएस कोर में बना रहा है।

कोणीय $ http अजाक्स को टाइमआउट गुण के साथ रद्द कर रहा है Angular 1.3.15 में काम नहीं करता है। उन लोगों के लिए जो इस के लिए इंतजार नहीं कर सकते हैं, मैं एक अजगर अजाक्स समाधान को बांट रहा हूं जो कांसर में लपेटता है।

समाधान में दो सेवाएं शामिल हैं:

  • HttpService (jQuery अजाक्स फ़ंक्शन के आसपास एक आवरण);
  • लंबित रिक्तियां सेवा (लंबित / खुला अजाक्स अनुरोध ट्रैक करता है)

यहां लंबित अनुरोध सेवा सेवा की जाती है:

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

एचटीटीपी सेवा सेवा:

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

बाद में आपकी सेवा में जब आप डेटा लोड कर रहे हों तो आप $ http के बजाय एचटीटीपीएस सेवा का उपयोग करेंगे:

 (function (angular) { angular.module('app').service('dataService', ["HttpService", function (httpService) { this.getResources = function (params) { return httpService.post('/serverMethod', { param: params }); }; }]); })(window.angular); 

बाद में आपके कोड में आप डेटा लोड करना चाहते हैं:

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

यदि आप यूआरआई-राउटर के साथ राज्यचेंज स्टार्ट पर लंबित अनुरोध रद्द करना चाहते हैं, तो आप इस तरह से कुछ का उपयोग कर सकते हैं:

// सेवा में

  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 कॉन्फ़िग में

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

किसी कारण के लिए config.timeout मेरे लिए काम नहीं करता है मैं इस दृष्टिकोण का इस्तेमाल किया:

 let cancelRequest = $q.defer(); let cancelPromise = cancelRequest.promise; let httpPromise = $http.get(...); $q.race({ cancelPromise, httpPromise }) .then(function (result) { ... }); 

यह $ http सेवा को एक पृथक विधि के अनुसार सजाने के द्वारा स्वीकार किए गए उत्तर को बढ़ाता है …

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

यह कोड क्या कर रहा है?

एक अनुरोध को रद्द करने के लिए एक "वायर्ड" टाइमआउट सेट होना चाहिए। यदि HTTP अनुरोध पर कोई टाइमआउट सेट नहीं किया गया है तो कोड एक "वायर्ड" टाइमआउट जोड़ता है (यदि कोई समय समाप्ति पहले से तय है तो कुछ भी नहीं बदला गया है)।

हालांकि, वादा को हल करने के लिए हमें "आस्थगित" पर एक संभाल की आवश्यकता है हम इस प्रकार एक मानचित्र का उपयोग करते हैं ताकि हम "स्थगित" बाद में पुनः प्राप्त कर सकें। जब हम गर्भपात विधि को कॉल करते हैं, तो "स्थगित" को नक्शे से लिया जाता है और फिर हम HTTP अनुरोध को रद्द करने के लिए हल करने का तरीका कहते हैं।

उम्मीद है कि यह किसी को मदद करता है

सीमाएँ

वर्तमान में यह केवल $ http.get के लिए काम करता है लेकिन आप $ http.post के लिए कोड जोड़ सकते हैं और इतने पर

कैसे इस्तेमाल करे …

आप इसका उपयोग तब कर सकते हैं, उदाहरण के लिए, राज्य परिवर्तन पर, निम्नानुसार …

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

यहां एक संस्करण है जो कई अनुरोधों को संभालता है, त्रुटि ब्लॉक में त्रुटियों को दबाने के लिए कॉलबैक में रद्द स्थिति के लिए भी जांच करता है। (टाइपस्क्रिप्ट में)

नियंत्रक स्तर:

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

मेरे http में प्राप्त करें:

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

सहायक विधियों

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

अब नेटवर्क टैब को देखकर, मैं देखता हूं कि यह बेहद हद तक काम करता है मैंने विधि 4 बार बुलाया और केवल पिछले एक के माध्यम से चला गया।

यहां छवि विवरण दर्ज करें