AngularJS
$ http अनुरोध

एक कंट्रोलर के अंदर $ http का उपयोग करना

$http सेवा एक फ़ंक्शन है जो एक HTTP अनुरोध बनाता है और एक वादा वापस करता है।

सामान्य उपयोग

// Simple GET request example:
$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

कंट्रोलर के अंदर उपयोग

appName.controller('controllerName',
    ['$http', function($http){

    // Simple GET request example:
    $http({
        method: 'GET',
        url: '/someUrl'
    }).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });
}])

शॉर्टकट तरीके

$http सेवा में शॉर्टकट तरीके भी हैं। Http तरीकों के बारे में यहां पढ़ें

वाक्य - विन्यास

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

शॉर्टकट तरीके

• $ http.get
• $ http.head
• $ http.post
• $ http.put
• $ http.delete
• $ http.jsonp
• $ http.patch

किसी सेवा में $ http अनुरोध का उपयोग करना

HTTP अनुरोधों को व्यापक रूप से हर वेब ऐप पर बार-बार उपयोग किया जाता है, इसलिए प्रत्येक सामान्य अनुरोध के लिए एक विधि लिखना बुद्धिमानी है, और फिर इसे पूरे ऐप में कई स्थानों पर उपयोग करना है।

httpRequestsService.js बनाएँ

httpRequestsService.js

appName.service('httpRequestsService', function($q, $http){

    return {
        // function that performs a basic get request
        getName: function(){
            // make sure $http is injected
            return $http.get("/someAPI/names")
                .then(function(response) {
                    // return the result as a promise
                    return response;
                }, function(response) {
                    // defer the promise
                    return $q.reject(response.data);
                });
        },

        // add functions for other requests made by your app
        addName: function(){
            // some code...
        }
    }
})

उपरोक्त सेवा सेवा के अंदर एक अनुरोध प्राप्त करेगी। यह किसी भी नियंत्रक के लिए उपलब्ध होगा जहां सेवा को इंजेक्ट किया गया है।

नमूना उपयोग

appName.controller('controllerName',
    ['httpRequestsService', function(httpRequestsService){

        // we injected httpRequestsService service on this controller
        // that made the getName() function available to use.
        httpRequestsService.getName()
            .then(function(response){
                // success
            }, function(error){
                // do something with the error
            })
    }])

इस दृष्टिकोण का उपयोग करके अब हम कभी भी और किसी भी नियंत्रक में httpRequestsService.js का उपयोग कर सकते हैं।

$ Http अनुरोध का समय

$ Http अनुरोधों के लिए समय की आवश्यकता होती है जो सर्वर के आधार पर भिन्न होता है, कुछ को कुछ मिलीसेकंड लग सकते हैं, और कुछ को कुछ सेकंड तक का समय लग सकता है। अक्सर अनुरोध से डेटा पुनर्प्राप्त करने के लिए आवश्यक समय महत्वपूर्ण होता है। प्रतिक्रिया मान मान नामों की एक सरणी है, निम्न उदाहरण पर विचार करें:

ग़लत

$scope.names = [];

$http({
    method: 'GET',
    url: '/someURL'
}).then(function successCallback(response) {
            $scope.names = response.data;
        },
        function errorCallback(response) {
            alert(response.status);
        });

alert("The first name is: " + $scope.names[0]);

$scope.names[0] एक्सेस करना। $scope.names[0] $ http अनुरोध के ठीक नीचे अक्सर एक त्रुटि होगी - सर्वर से प्रतिक्रिया प्राप्त होने से पहले कोड की यह लाइन निष्पादित होती है।

सही बात

$scope.names = [];

$scope.$watch('names', function(newVal, oldVal) {
    if(!(newVal.length == 0)) {
        alert("The first name is: " + $scope.names[0]);
    }
});

$http({
    method: 'GET',
    url: '/someURL'
}).then(function successCallback(response) {
            $scope.names = response.data;
        },
        function errorCallback(response) {
            alert(response.status);
        });

$ वॉच सेवा का उपयोग करके हम $scope.names उपयोग करते हैं। केवल प्रतिक्रिया $scope.names सरणी नाम। आरंभीकरण के दौरान, फ़ंक्शन को तब भी बुलाया जाता है, हालांकि $scope.names नाम पहले से आरंभ किया गया था, इसलिए यह जांचना कि क्या newVal.length 0 से अलग है आवश्यक है। जागरूक रहें - $scope.names लिए किए गए कोई भी परिवर्तन। नाम घड़ी फ़ंक्शन को ट्रिगर करेगा।