javascript - सेवा में $ http प्रतिक्रिया प्रसंस्करण




angularjs angular-http (8)

इससे संबंधित मैं एक समान समस्या से गुजर गया, लेकिन कोणीय द्वारा प्राप्त या पोस्ट के साथ नहीं बल्कि तीसरे पक्ष (मेरे मामले में क्रोम एक्सटेंशन) द्वारा किए गए एक्सटेंशन के साथ।
मुझे जिस समस्या का सामना करना पड़ा वह यह है कि क्रोम एक्सटेंशन then() वापस नहीं आएगा then() इसलिए मैं ऊपर दिए गए समाधान में ऐसा करने में असमर्थ था लेकिन नतीजा अभी भी असीमित है।
तो मेरा समाधान एक सेवा बनाना और कॉलबैक पर आगे बढ़ना है

app.service('cookieInfoService', function() {
    this.getInfo = function(callback) {
        var model = {};
        chrome.cookies.get({url:serverUrl, name:'userId'}, function (response) {
            model.response= response;
            callback(model);
        });
    };
});

फिर मेरे नियंत्रक में

app.controller("MyCtrl", function ($scope, cookieInfoService) {
    cookieInfoService.getInfo(function (info) {
        console.log(info);
    });
});

उम्मीद है कि यह दूसरों को एक ही समस्या प्राप्त करने में मदद कर सकता है।

मैंने हाल ही में इस मुद्दे का एक विस्तृत विवरण पोस्ट किया है जिसका मैं here सामना कर रहा हूं। चूंकि मैं एक वास्तविक $http अनुरोध नहीं भेज सका, मैंने एसिंक्रोनस व्यवहार को अनुकरण करने के लिए टाइमआउट का उपयोग किया। मेरे मॉडल से देखने के लिए बाध्यकारी डेटा @Gloopy की मदद से सही काम कर रहा है

अब, जब मैं $timeout (स्थानीय रूप से परीक्षण किया गया) के बजाय $http उपयोग करता हूं, तो मुझे लगता है कि एसिंक्रोनस अनुरोध सफल रहा था और data मेरी सेवा में जेसन प्रतिक्रिया से भरा हुआ है। लेकिन, मेरा विचार अद्यतन नहीं हो रहा है।

here प्लंकर अपडेट किया here


इसे सरल होने दें। यह उतना आसान है जितना

  1. आपकी सेवा में वापसी का promise (सेवा में then उपयोग करने की आवश्यकता नहीं है)
  2. अपने नियंत्रक में then प्रयोग करें

डेमो। http://plnkr.co/edit/cbdG5p?p=preview

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

app.factory('myService', function($http) {
  return {
    async: function() {
      return $http.get('test.json');  //1. this returns promise
    }
  };
});

app.controller('MainCtrl', function( myService,$scope) {
  myService.async().then(function(d) { //2. so you can use .then()
    $scope.data = d;
  });
});

जब आप अपनी सरणी में यूआई को बाध्य करते हैं तो आप यह सुनिश्चित करना चाहते हैं कि आप लंबाई को 0 सेट करके और सरणी में डेटा को दबाकर सीधे उसी सरणी को अपडेट करें।

इसके बजाए (जिसने data लिए एक अलग सरणी संदर्भ सेट किया है जिसके बारे में आपका यूआई नहीं पता होगा):

 myService.async = function() {
    $http.get('test.json')
    .success(function (d) {
      data = d;
    });
  };

इसे इस्तेमाल करे:

 myService.async = function() {
    $http.get('test.json')
    .success(function (d) {
      data.length = 0;
      for(var i = 0; i < d.length; i++){
        data.push(d[i]);
      }
    });
  };

यहां एक पहेली है जो खाली करने और मौजूदा में जोड़ने के लिए एक नई सरणी सेट करने के बीच अंतर दिखाती है। मैं आपका plnkr काम नहीं कर सका लेकिन उम्मीद है कि यह आपके लिए काम करता है!


जहां तक ​​सेवा में प्रतिक्रिया को कैश करना है, यहां एक और संस्करण है जो अब तक मैंने जो देखा है उससे कहीं अधिक सीधे आगे लगता है:

App.factory('dataStorage', function($http) {
     var dataStorage;//storage for cache

     return (function() {
         // if dataStorage exists returned cached version
        return dataStorage = dataStorage || $http({
      url: 'your.json',
      method: 'GET',
      cache: true
    }).then(function (response) {

              console.log('if storage don\'t exist : ' + response);

              return response;
            });

    })();

});

यह सेवा या तो कैश किए गए डेटा या $http.get ;

 dataStorage.then(function(data) {
     $scope.data = data;
 },function(e){
    console.log('err: ' + e);
 });

मुझे एक ही समस्या थी, लेकिन जब मैं इंटरनेट पर सर्फिंग कर रहा था, मुझे समझ में आया कि $ http डिफ़ॉल्ट रूप से एक वादा वापस लौटाता है, तो मैं इसे "डेटा" वापस करने के बाद "फिर" के साथ उपयोग कर सकता हूं। कोड को देखें:

 app.service('myService', function($http) {
       this.getData = function(){
         var myResponseData = $http.get('test.json').then(function (response) {
            console.log(response);.
            return response.data;
          });
         return myResponseData;

       }
});    
 app.controller('MainCtrl', function( myService, $scope) {
      // Call the getData and set the response "data" in your scope.  
      myService.getData.then(function(myReponseData) {
        $scope.data = myReponseData;
      });
 });

मुझे लगता है कि एक बेहतर तरीका यह होगा:

सर्विस:

app.service('FruitsManager',function($q){

    function getAllFruits(){
        var deferred = $q.defer();

        ...

        // somewhere here use: deferred.resolve(awesomeFruits);

        ...

        return deferred.promise;
    }

    return{
        getAllFruits:getAllFruits
    }

});

और नियंत्रक में आप बस उपयोग कर सकते हैं:

$scope.fruits = FruitsManager.getAllFruits();

कोणीय स्वचालित रूप से संकल्पित awesomeFruits को $scope.fruits में डाल $scope.fruits


मैंने http://markdalgleish.com/2013/06/using-promises-in-angularjs-views/ पढ़ा है [AngularJS हमें हल करने के बजाय मैन्युअल रूप से दायरे पर सीधे वादा करके हमारे नियंत्रक तर्क को व्यवस्थित करने की अनुमति देता है सफलता कॉलबैक में मूल्य।]

इतना आसान और आसान :)

var app = angular.module('myApp', []);
            app.factory('Data', function($http,$q) {
                return {
                    getData : function(){
                        var deferred = $q.defer();
                        var promise = $http.get('./largeLoad').success(function (response) {
                            deferred.resolve(response);
                        });
                        // Return the promise to the controller
                        return deferred.promise; 
                    }
                }
            });
            app.controller('FetchCtrl',function($scope,Data){
                $scope.items = Data.getData();
            });

उममीद है कि इससे मदद मिलेगी


यहां एक प्लंक है जो आप चाहते हैं: http://plnkr.co/edit/TTlbSv?p=preview

विचार यह है कि आप सीधे वादे के साथ काम करते हैं और उनके "फिर" कार्यों को असीमित रूप से लौटाए गए प्रतिक्रियाओं में हेरफेर और एक्सेस करने के लिए काम करते हैं।

app.factory('myService', function($http) {
  var myService = {
    async: function() {
      // $http returns a promise, which has a then function, which also returns a promise
      var promise = $http.get('test.json').then(function (response) {
        // The then function here is an opportunity to modify the response
        console.log(response);
        // The return value gets picked up by the then in the controller.
        return response.data;
      });
      // Return the promise to the controller
      return promise;
    }
  };
  return myService;
});

app.controller('MainCtrl', function( myService,$scope) {
  // Call the async method and then do stuff with what is returned inside our own then function
  myService.async().then(function(d) {
    $scope.data = d;
  });
});

यहां एक और अधिक जटिल संस्करण है जो अनुरोध को कैश करता है ताकि आप इसे केवल पहली बार बना सकें ( http://plnkr.co/edit/2yH1F4IMZlMS8QsV9rHv?p=preview ):

app.factory('myService', function($http) {
  var promise;
  var myService = {
    async: function() {
      if ( !promise ) {
        // $http returns a promise, which has a then function, which also returns a promise
        promise = $http.get('test.json').then(function (response) {
          // The then function here is an opportunity to modify the response
          console.log(response);
          // The return value gets picked up by the then in the controller.
          return response.data;
        });
      }
      // Return the promise to the controller
      return promise;
    }
  };
  return myService;
});

app.controller('MainCtrl', function( myService,$scope) {
  $scope.clearData = function() {
    $scope.data = {};
  };
  $scope.getData = function() {
    // Call the async method and then do stuff with what is returned inside our own then function
    myService.async().then(function(d) {
      $scope.data = d;
    });
  };
});




angular-http