2012-08-14 11 views
44

मेरे पास AngularJS और सर्वर-साइड बैकएंड का उपयोग करके एक एप्लिकेशन बनाया गया है जो JSON फ़ॉर्म में सभी अनुरोध प्रदान करता है। प्रत्येक अनुरोध एक JSON कंटेनर में लपेटा जाता है जिसमें डेटा वैरिएबल होता है जिसमें अनुरोध के लिए विशिष्ट डेटा होता है। अन्य डेटा, जिसे एप्लिकेशन के भीतर राज्य और नियंत्रण रखने के लिए उपयोग किया जाता है, त्रुटियों और सफलता संदेशों की जांच करें, और सत्र झंडे की जांच करें। इन सभी अन्य चरों को हर अनुरोध के साथ परोसा जाता है और डेटा वैरिएबल से पहले जांच की जाती है।

अभी मेरे पास JSON प्रतिक्रिया की सामग्री और फिर डेटा स्वयं की सामग्री की जांच करने का एक तरीका है।

$http.get('something.json').success(function(response) { 
    var data = examineJSONResponse(response); 
    //do the data stuff 
}); 

यह काम करता है और examineJSONResponse कोड पर एक नज़र लेता है और अगर वहाँ कुछ गलत है तो यह window.location.href का उपयोग करके अपवाद फेंकता है और पृष्ठ को पुनः लोड।

क्या कोई तरीका है कि मैं इसे AngularJS के भीतर स्वचालित कर सकता हूं ताकि प्रत्येक बार एक $ http कॉल किया जा सके, तो यह जांचता है और केवल डेटा वैरिएबल सामग्री JSON प्रतिक्रिया के रूप में देता है?

उत्तर

85

आप कोणीय 1.1.4+ के साथ $httpProvider.interceptors पर एक इंटरसेप्टर जोड़कर प्रतिक्रियाओं को रोक सकते हैं (दस्तावेज here इंटरसेप्टर के लिए खोज देखें)।

एक विशिष्ट सामग्री प्रकार के लिए जेसन जैसे आप संभावित रूप से परिवर्तनों को अस्वीकार कर सकते हैं या अपवाद फेंक सकते हैं भले ही कॉल सफल हो। आप response.data संशोधित कर सकते हैं कि रूप में अच्छी तरह यहाँ अपने नियंत्रक कोड के लिए पारित हो जाएगा:

myModule.factory('myHttpInterceptor', function ($q) { 
    return { 
     response: function (response) { 
      // do something on success 
      if(response.headers()['content-type'] === "application/json; charset=utf-8"){ 
       // Validate response, if not ok reject 
       var data = examineJSONResponse(response); // assumes this function is available 

       if(!data) 
        return $q.reject(response); 
      } 
      return response; 
     }, 
     responseError: function (response) { 
      // do something on error 
      return $q.reject(response); 
     } 
    }; 
}); 
myModule.config(function ($httpProvider) { 
    $httpProvider.interceptors.push('myHttpInterceptor'); 
}); 

नोट: यहाँ पहले 1.1.4 के संस्करणों के लिए मूल जवाब है (responseInterceptors कोणीय 1.1 के साथ पदावनत किया गया .4):

हो सकता है कि वहाँ एक बेहतर तरीका है, लेकिन मुझे लगता है कि आप json जैसा कोई विशेष सामग्री प्रकार), जिसमें आप संभावित परिवर्तन या वें अस्वीकार के http प्रतिक्रिया इंटरसेप्टर साथ this post (वर्णित here) (के लिए इसी तरह कुछ कर सकते हैं कॉल एक सफलता थी, भले ही कॉल एक सफलता थी। आप response.data को संशोधित कर सकते हैं जो आपके कंट्रोलर कोड पर भी पास हो जाएगा।

myModule.factory('myHttpInterceptor', function ($q) { 
    return function (promise) { 
     return promise.then(function (response) { 
      // do something on success 
      if(response.headers()['content-type'] === "application/json; charset=utf-8"){ 
       // Validate response if not ok reject 
       var data = examineJSONResponse(response); // assumes this function is available 

       if(!data) 
        return $q.reject(response); 
      } 
      return response; 
     }, function (response) { 
      // do something on error 
      return $q.reject(response); 
     }); 
    }; 
}); 
myModule.config(function ($httpProvider) { 
    $httpProvider.responseInterceptors.push('myHttpInterceptor'); 
}); 
+0

वर्क्स एक आकर्षण की तरह:

angular.module('App', []) .factory('myHttp',['$http',function($http) { return function(url, success, failure) { $http.get(url).success(function(json) { var data = examineJSONResponse(json); data && data.success ? success() : failure(); }).error(failure); ); } }]); 

और अब इस तरह कहा जा सकता है। – matsko

+0

मैं वास्तव में कोणीय के साथ इस इंटरसेप्टर को कैसे पंजीकृत करूं? –

+1

@ माइकीसी मैंने इंटरसेप्टर को पंजीकृत करने के लिए उदाहरण को संशोधित किया। उम्मीद है की यह मदद करेगा! – Gloopy

7

एक और समाधान सेवा बनाने और $ http चर के आसपास इसका उपयोग करना है।

myHttp(url, onSuccess, onFailure); 
+2

आपका कोड नहीं चलाया जाता है क्योंकि 'सेवा' विधि का दूसरा पैरामीटर एक कन्स्ट्रक्टर फ़ंक्शन होना आवश्यक है, जैसा कि [AngularJS मेलिंग सूची में इस धागे में समझाया गया है] (https://groups.google.com/forum/# ! संदेश/कोणीय/56sdORWEoqg/b8hdPskxZXsJ)। मुझे लगता है कि आप शायद 'सेवा' के बजाय' फैक्ट्री 'टाइप करना चाहते थे और यह काम करेगा। – tamakisquare

+0

आप सही हैं। यह एक 'कारखाना' होना चाहिए। अब यह अपडेट किया गया है। धन्यवाद। – matsko