AngularJS => HTTP इंटरसेप्टर

परिचय

AngularJS की $ http सेवा हमें बैकएंड के साथ संवाद करने और HTTP अनुरोध करने की अनुमति देती है। ऐसे मामले हैं जहां हम हर अनुरोध को कैप्चर करना चाहते हैं और इसे सर्वर पर भेजने से पहले हेरफेर करते हैं। दूसरी बार हम कॉल को पूरा करने से पहले प्रतिक्रिया को पकड़ना और संसाधित करना चाहेंगे। ग्लोबल http एरर हैंडलिंग भी इस तरह की जरूरत का एक अच्छा उदाहरण हो सकता है। ऐसे मामलों के लिए इंटरसेप्टर बिल्कुल बनाए जाते हैं।

शुरू करना

कोणीय की अंतर्निहित $http सेवा हमें HTTP अनुरोध भेजने की अनुमति देती है। आमतौर पर, अनुरोध अनुरोध से पहले या बाद में चीजों को करने के लिए उत्पन्न होता है, उदाहरण के लिए प्रत्येक अनुरोध को जोड़ने के लिए एक प्रमाणीकरण टोकन या एक सामान्य त्रुटि हैंडलिंग तर्क बनाना।

सामान्य httpInterceptor कदम से कदम

निम्नलिखित सामग्री के साथ एक HTML फ़ाइल बनाएँ:

<!DOCTYPE html>
<html>
<head>
  <title>Angular Interceptor Sample</title>
  <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
  <script src="app.js"></script>
  <script src="appController.js"></script>
  <script src="genericInterceptor.js"></script>
</head>
<body ng-app="interceptorApp">
    <div ng-controller="appController as vm">
        <button ng-click="vm.sendRequest()">Send a request</button>
    </div>
</body>
</html>

'App.js' नामक एक जावास्क्रिप्ट फ़ाइल जोड़ें:

var interceptorApp = angular.module('interceptorApp', []);

interceptorApp.config(function($httpProvider) {
        $httpProvider.interceptors.push('genericInterceptor');
});

'AppController.js' नामक एक और जोड़ें:

(function() {
    'use strict';

    function appController($http) {
        var vm = this;

        vm.sendRequest = function(){
            $http.get('http://google.com').then(function(response){
                console.log(response);
            });
        };
    }

    angular.module('interceptorApp').controller('appController',['$http', appController]);
})();

और अंत में इंटरसेप्टर वाली फाइल ही 'genericInterceptor.js':

(function() {
    "use strict";

    function genericInterceptor($q) {
        this.responseError = function (response) {
            return $q.reject(response);
        };

        this.requestError = function(request){
            if (canRecover(rejection)) {
                return responseOrNewPromise
            }
            return $q.reject(rejection);
        };

        this.response = function(response){
            return response;
        };

        this.request = function(config){
            return config;
        }
    } 

    angular.module('interceptorApp').service('genericInterceptor', genericInterceptor);
})();

The जेनेरिकइन्सेप्टर ’संभावित कार्यों को कवर करता है जिसे हम अपने आवेदन में अतिरिक्त व्यवहार को जोड़ सकते हैं।

Http इंटरसेप्टर का उपयोग करके प्रतिक्रिया पर फ्लैश संदेश

व्यू फाइल में

आधार html (index.html) में जहां हम आम तौर पर कोणीय लिपियों या HTML को शामिल करते हैं, जिसे ऐप में साझा किया जाता है, एक खाली div तत्व छोड़ते हैं, इस div तत्व के अंदर फ़्लैश संदेश दिखाई देंगे

<div class="flashmessage" ng-if="isVisible">
    {{flashMessage}}
</div>

स्क्रिप्ट फाइल

कोणीय मॉड्यूल की विन्यास विधि में, httpProvider को इंजेक्ट करें, httpProvider में इंटरसेप्टर ऐरे प्रॉपर्टी है, कस्टम इंटरसेप्टर को धक्का दें, वर्तमान उदाहरण में कस्टम इंटरसेप्टर केवल प्रतिक्रिया को स्वीकार करता है और rootScope से जुड़ी विधि को कॉल करता है।

var interceptorTest = angular.module('interceptorTest', []);
    
    interceptorTest.config(['$httpProvider',function ($httpProvider) {

        $httpProvider.interceptors.push(["$rootScope",function ($rootScope) {
            return {     //intercept only the response
                        'response': function (response) 
                                    {
                                      $rootScope.showFeedBack(response.status,response.data.message);
                           
                                      return response;
                                    }
                   };
        }]);
        
    }])

चूँकि केवल प्रदाताओं को एक कोणीय मॉड्यूल (जो httpProvider है और rootcope नहीं है) के विन्यास विधि में इंजेक्ट किया जा सकता है, कोणीय मॉड्यूल के रन विधि के अंदर rootcope से जुड़ी विधि की घोषणा करें।

मैसेज को $ टाइमआउट के अंदर भी प्रदर्शित करें ताकि मैसेज में फ्लैश प्रॉपर्टी हो, जो कि थ्रेसहोल्ड टाइम के बाद गायब हो रही है। हमारे उदाहरण में इसकी 3000 मि।

interceptorTest.run(["$rootScope","$timeout",function($rootScope,$timeout){
     $rootScope.showFeedBack = function(status,message){
        
        $rootScope.isVisible = true;
        $rootScope.flashMessage = message;
        $timeout(function(){$rootScope.isVisible = false },3000)
    }
}]);

आम नुकसान

कोणीय मॉड्यूल के विन्यास विधि के अंदर $ rootScope या किसी भी अन्य सेवाओं को इंजेक्षन करने की कोशिश करते हुए, कोणीय एप्लिकेशन के जीवनचक्र को अनुमति नहीं दी जाती है और अज्ञात प्रदाता त्रुटि को फेंक दिया जाएगा। केवल प्रदाताओं को कोणीय मॉड्यूल के कॉन्फ़िगरेशन विधि में इंजेक्ट किया जा सकता है

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

AngularJS
HTTP इंटरसेप्टर

खोज…