एंजुलरज में $ http अनुरोध से प्रतिक्रिया आने तक प्रतीक्षा कैसे करें?

Question

मैं कुछ डेटा का उपयोग कर रहा हूं जो कई पृष्ठों में एक विश्वसनीय सेवा से है। तो मैं इसके लिए कोणीय कारखानों का उपयोग कर रहा हूं। इसलिए, मुझे सर्वर से एक बार डेटा प्राप्त करना होगा, और हर बार मुझे उस परिभाषित सेवा के साथ डेटा मिल रहा है। एक वैश्विक चर की तरह।

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

myApp.factory('myService', function($http) { 
    $http({method:"GET", url:"/my/url"}).success(function(result){ 
     return result; 
    }); 
}); 

मेरी नियंत्रक में मैं के रूप में इस सेवा का उपयोग कर रहा:

function myFunction($scope, myService) { 
    $scope.data = myService; 
    console.log("data.name"+$scope.data.name); 
} 

इसकी मेरी आवश्यकताओं के अनुसार मेरे लिए ठीक काम कर रहा यहाँ नमूना है। लेकिन यहां समस्या यह है कि, जब मैं अपने वेबपृष्ठ में पुनः लोड करता हूं तो सेवा को फिर से कॉल किया जाएगा और सर्वर के लिए अनुरोध किया जाएगा। यदि किसी अन्य फ़ंक्शन निष्पादन के बीच में जो "परिभाषित सेवा" पर निर्भर है, तो यह "कुछ" जैसी त्रुटि को अपरिभाषित कर रहा है। इसलिए जब तक सेवा लोड नहीं हो जाती है, तब तक मैं अपनी स्क्रिप्ट में इंतजार करना चाहता हूं। मैं उसे कैसे कर सकता हूँ? क्या वैसे भी angularjs में ऐसा करते हैं?

Answer 1

आपको एसिंक ऑपरेशंस के लिए वादे का उपयोग करना चाहिए जहां आपको यह नहीं पता कि यह कब पूरा हो जाएगा। एक वादा "एक ऐसे ऑपरेशन का प्रतिनिधित्व करता है जो अभी तक पूरा नहीं हुआ है, लेकिन भविष्य में इसकी उम्मीद है।"

myApp.factory('myService', function($http) { 

    var getData = function() { 

     // Angular $http() and then() both return promises themselves 
     return $http({method:"GET", url:"/my/url"}).then(function(result){ 

      // What we return here is the data that will be accessible 
      // to us after the promise resolves 
      return result.data; 
     }); 
    }; 


    return { getData: getData }; 
}); 


function myFunction($scope, myService) { 
    var myDataPromise = myService.getData(); 
    myDataPromise.then(function(result) { 

     // this is only run after getData() resolves 
     $scope.data = result; 
     console.log("data.name"+$scope.data.name); 
    }); 
} 

संपादित करें:: Sujoys के बारे में टिप्पणी है कि क्या कर मैं ऐसा करने की जरूरत है कि myFuction() कॉल तो फिर जब तक नहीं लौटेगा() (https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise)

एक उदाहरण कार्यान्वयन जैसा होगा समारोह निष्पादन खत्म करता है।

function myFunction($scope, myService) { 
    var myDataPromise = myService.getData(); 
    myDataPromise.then(function(result) { 
     $scope.data = result; 
     console.log("data.name"+$scope.data.name); 
    }); 
    console.log("This will get printed before data.name inside then. And I don't want that."); 
} 

ठीक है, GetData करने के लिए कॉल() लगता है जाने पूरा करने के लिए 10 सेकंड लिया। अगर उस समय समारोह में कुछ भी वापस नहीं आया, तो यह प्रभावी रूप से सामान्य सिंक्रोनस कोड बन जाएगा और जब तक यह पूरा नहीं हो जाता तब तक ब्राउज़र लटकाएगा।

तत्काल लौटने वाले वादे के साथ, ब्राउज़र इस दौरान अन्य कोड के साथ जारी रखने के लिए स्वतंत्र है। एक बार वादा संकल्प/विफल हो जाने के बाद, तब() कॉल ट्रिगर हो जाती है। तो यह इस तरह से और अधिक समझ में आता है, भले ही यह आपके कोड का प्रवाह थोड़ा अधिक जटिल हो (जटिलता एसिंक/समांतर प्रोग्रामिंग की सामान्य समस्या है!)

Answer 2

इस के लिए नए लोगों के लिए

आपकी सेवा में: यह भी उदाहरण के लिए एक कॉलबैक का उपयोग कर सकते

DataHandler.GetRandomArtists(3, function(response){ 
     $scope.data.random_artists = response; 
    }); 

Answer 3

मैं एक ही समस्या है और कोई भी इन करता है, तो हो रही थी:

.factory('DataHandler',function ($http){ 

    var GetRandomArtists = function(data, callback){ 
    $http.post(URL, data).success(function (response) { 
     callback(response); 
     }); 
    } 
}) 

अपने नियंत्रक में मेरे लिए काम किया यहाँ हालांकि क्या काम था ...

app.factory('myService', function($http) { 
    var data = function (value) { 
      return $http.get(value); 
    } 

    return { data: data } 
}); 

और फिर समारोह यह है का उपयोग करता है ...

vm.search = function(value) { 

     var recieved_data = myService.data(value); 

     recieved_data.then(
      function(fulfillment){ 
       vm.tags = fulfillment.data; 
      }, function(){ 
       console.log("Server did not send tag data."); 
     }); 
    }; 

सेवा है कि जरूरी नहीं है, लेकिन मैं तानाना के लिए अपने एक अच्छा अभ्यास लगता है । एक के लिए आपको जो कुछ चाहिए, वह किसी अन्य के लिए विशेष रूप से एपीआई का उपयोग करते समय होगा। वैसे भी मुझे आशा है कि यह सहायक होगा।

Answer 4

एफवाईआई, यह एंगुलरफायर का उपयोग कर रहा है, इसलिए यह एक अलग सेवा या अन्य उपयोग के लिए थोड़ा भिन्न हो सकता है लेकिन उसी आईएसई $ http को हल करना चाहिए। मेरे पास यही एकमात्र मुद्दा था जो मेरे लिए उपयुक्त था, सभी सेवाओं/कारखानों को दायरे पर एक ही वादे में जोड़ना सबसे अच्छा था। प्रत्येक मार्ग/राय यह है कि इन सेवाओं की जरूरत पर/आदि लोड करने के लिए मैं प्रमाणन मैं डाल

myservice.$loaded().then(function() {$rootScope.myservice = myservice;}); 

और बाद रन पर) किसी भी कार्य करता है कि नियंत्रक समारोह यानी myfunct (अंदर भरी हुई डेटा की आवश्यकता होती है और मुख्य app.js डाल इसलिए नियंत्रक

myfunct() 

अंदर सब कुछ चला सकते हैं ध्यान में रखते हुए मैं सिर्फ पहले/माता-पिता को देखने के तत्व/आवरण में

ng-if="myservice" ng-init="somevar=myfunct()" 

था async वादों/आदेश/कुए के बारे में चिंता किए बिना मुद्दे मुझे उम्मीद है कि मेरे पास एक ही मुद्दे के साथ किसी की मदद करेगा।