AngularJS के साथ ग्लोबल अजाक्स त्रुटि हैंडलर

Question

जब मेरी वेबसाइट 100% jQuery की थी, तो मैं यह करता था:

$.ajaxSetup({
    global: true,
    error: function(xhr, status, err) {
        if (xhr.status == 401) {
           window.location = "./index.html";
        }
    }
});

401 त्रुटियों के लिए एक वैश्विक हैंडलर सेट करना। अब, मैं साथ AngularJS का उपयोग $resourceऔर $httpमेरी (REST) सर्वर के लिए अनुरोध करने के लिए। क्या कोणीय के साथ वैश्विक त्रुटि हैंडलर को इसी तरह सेट करने का कोई तरीका है?

Comments

क्या यह AngularJS Failed Resource GET का संभावित डुप्लिकेट है ?

— MilkyWayJoe

नहीं, हम आवेदन के लिए एक वैश्विक त्रुटि 401 हैंडलर करना चाहते हैं

— क्रिकार्डोल

योग्य, क्या आपने माना है कि आप क्या चाहते हैं लेकिन एक अलग http स्थिति के साथ (जिसे आप बदल सकते हैं)? किसी भी तरह, pkozlowski.opensource का जवाब आपको दिखाता है कि यह कैसे करना है

— MilkyWayJoe

नहीं, यह जस्टिन के उत्तर की तरह बहुत कुछ है ... यह उस प्रश्न के साथ एक डुप्लिकेट नहीं है जो आप बात कर रहे हैं

— cricardol

Answer 1

मैं कोणीय के साथ एक वेबसाइट भी बना रहा हूं और मैं वैश्विक 401 हैंडलिंग के लिए इसी बाधा में आया हूं। जब मैं इस ब्लॉग पोस्ट पर आया तब मैंने http इंटरसेप्टर का उपयोग किया। हो सकता है कि आपको यह उतना उपयोगी लगे जितना मैंने किया था।

"AngularJS (या समान) आधारित अनुप्रयोग में प्रमाणीकरण।" , एस्पियो सॉफ्टवेयर

संपादित करें: अंतिम समाधान

angular.module('myApp', ['myApp.filters', 'myApp.services', 'myApp.directives'], function ($routeProvider, $locationProvider, $httpProvider) {

    var interceptor = ['$rootScope', '$q', function (scope, $q) {

        function success(response) {
            return response;
        }

        function error(response) {
            var status = response.status;

            if (status == 401) {
                window.location = "./index.html";
                return;
            }
            // otherwise
            return $q.reject(response);

        }

        return function (promise) {
            return promise.then(success, error);
        }

    }];
    $httpProvider.responseInterceptors.push(interceptor);

Comments

$ Q.reject (प्रतिक्रिया) वापस करने की आवश्यकता है; जब स्थिति == 401, एक शोर कोणीय त्रुटि से बचने के लिए

— s_t_e_v_e

@daniellmb। निर्भर करता है। यदि आप वास्तव में दूसरे पृष्ठ पर जाना चाहते हैं, न कि केवल दृश्य बदल सकते हैं तो आपको वास्तव में $ विंडो का उपयोग करना चाहिए। यदि आपका लॉगिन पृष्ठ आपके कोणीय के साथ सिर्फ एक और दृश्य और नियंत्रक है तो आप $ लोकेशन का उपयोग कर सकते हैं

— ।path

@uriDium सही मेरी बात कोणीय प्रदान की गई वस्तुओं का उपयोग करना था ताकि आप नकली और परीक्षण कर सकें।

— डैनियेलंब 22

$ httpProvider.responseInterceptors को अब हटा दिया गया है। Docs.angularjs.org/api/ng.$http#description_interceptors देखें ।

— क्वार्ट्जमो

सफलता में आपको वापस लौटने की ज़रूरत होती है return response || $q.when(response);ताकि यदि प्रतिक्रिया खाली हो तो एक वादा वस्तु भी वापस मिल जाए।

— आशीष गौड़

Answer 2

कृपया ध्यान दें कि प्रतिसादकों को Angular 1.1.4 से हटा दिया गया है। नीचे आप आधिकारिक डॉक्स के आधार पर एक अंश पा सकते हैं , जो इंटरसेप्टर को लागू करने का नया तरीका दिखा रहा है।

$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
  return {
    'response': function(response) {
      // do something on success
      return response || $q.when(response);
    },

   'responseError': function(rejection) {
      // do something on error
      if (canRecover(rejection)) {
        return responseOrNewPromise;
      }
      return $q.reject(rejection);
    }
  };
});

$httpProvider.interceptors.push('myHttpInterceptor');

यह Coffeescript का उपयोग करके मेरी परियोजना में ऐसा दिखता है:

angular.module("globalErrors", ['appStateModule']).factory "myHttpInterceptor", ($q, $log, growl) ->
  response: (response) ->
    $log.debug "success with status #{response.status}"
    response || $q.when response

  responseError: (rejection) ->
    $log.debug "error with status #{rejection.status} and data: #{rejection.data['message']}"
    switch rejection.status
      when 403
        growl.addErrorMessage "You don't have the right to do this"
      when 0
        growl.addErrorMessage "No connection, internet is down?"
      else
        growl.addErrorMessage "#{rejection.data['message']}"

    # do something on error
    $q.reject rejection

.config ($provide, $httpProvider) ->
  $httpProvider.interceptors.push('myHttpInterceptor')

Comments

लेकिन आपके पास responseError इंटरसेप्टर में कोई xhr डेटा या अन्य उपयोगी जानकारी नहीं होगी। यदि यह वसूली योग्य है तो यह तय करना भी बेकार है।

— zw0rk

@ zw0rk तुम ... अंदर responseError, rejectionतुम्हारी जरूरत की हर चीज है।

— लैंगडन

क्या वह आखिरी पंक्ति, $httpProvider...एक config()ब्लॉक में लिपटी हुई है ?

— डेलविन

वास्तव में, मैंने अपने उत्तर को यह दिखाने के लिए संपादित किया है कि मैंने अपनी परियोजना में कॉफ़ीस्क्रिप्ट का उपयोग करके कैसे किया। यदि आप जावास्क्रिप्ट में पसंद करते हैं तो js2cfish.org का उपयोग करें ।

— माइक

फ़ंक्शन के responseतहत सभी संदर्भ responseErrorवास्तव में संदर्भ के लिए rejectionनहीं होना चाहिए (या हो सकता है कि पैरामीटर का नाम उसके नाम पर बदल दिया जाना चाहिए response?

— एडम नोफ़्सिंगर

Answer 3

<script type="text/javascript" src="../js/config/httpInterceptor.js" ></script>इस सामग्री के साथ फ़ाइल बनाएँ :

(function(){
  var httpInterceptor = function ($provide, $httpProvider) {
    $provide.factory('httpInterceptor', function ($q) {
      return {
        response: function (response) {
          return response || $q.when(response);
        },
        responseError: function (rejection) {
          if(rejection.status === 401) {
            // you are not autorized
          }
          return $q.reject(rejection);
        }
      };
    });
    $httpProvider.interceptors.push('httpInterceptor');
  };
  angular.module("myModule").config(httpInterceptor);
}());

Comments

@ThilakRaj उपरोक्त कोड हर http अनुरोध पर चलना चाहिए। इसलिए क्रोम में दो ब्रेकपॉइंट बनाएं, एक ´return response and लाइन पर और एक urnreturn $ q.reject it पर यह जांचने के लिए कि यह चलना चाहिए।

— Jan-Terje Sørensen