Elaborazione della risposta $ http in servizio

Di recente ho pubblicato una descrizione dettagliata del problema che sto affrontando qui a SO. Non potendo inviare una $httprichiesta effettiva , ho usato il timeout per simulare il comportamento asincrono. L'associazione dei dati dal mio modello per visualizzare funziona correttamente, con l'aiuto di @Gloopy

Ora, quando uso $httpinvece di $timeout(testato localmente), vedo che la richiesta asincrona ha avuto esito positivo ed dataè piena di risposte json nel mio servizio. Ma il mio punto di vista non si aggiorna.

Plunkr aggiornato qui

Ecco un Plunk che fa quello che vuoi: http://plnkr.co/edit/TTlbSv?p=preview

L'idea è che lavori direttamente con le promesse e le loro funzioni "allora" per manipolare e accedere alle risposte restituite in modo asincrono.

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;
  });
});

Ecco una versione leggermente più complicata che memorizza nella cache la richiesta in modo da renderla la prima volta ( 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;
    });
  };
});

Lascia che sia semplice. È semplice come

1. Ritorna promisenel tuo servizio (non è necessario utilizzarlo thennel servizio)
2. Utilizzare thennel controller

Demo. 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;
  });
});

Poiché è asincrono, $scopesta ottenendo i dati prima che la chiamata ajax sia completa.

È possibile utilizzare $qnel servizio per creare promisee restituirlo al controller e il controller ottiene il risultato all'interno della then()chiamata contro promise.

Al vostro servizio,

app.factory('myService', function($http, $q) {
  var deffered = $q.defer();
  var data = [];  
  var myService = {};

  myService.async = function() {
    $http.get('test.json')
    .success(function (d) {
      data = d;
      console.log(d);
      deffered.resolve();
    });
    return deffered.promise;
  };
  myService.data = function() { return data; };

  return myService;
});

Quindi, nel controller:

app.controller('MainCtrl', function( myService,$scope) {
  myService.async().then(function() {
    $scope.data = myService.data();
  });
});

tosh shimayama ha una soluzione ma puoi semplificare molto se usi il fatto che $ http restituisce promesse e che promesse possono restituire un valore:

app.factory('myService', function($http, $q) {
  myService.async = function() {
    return $http.get('test.json')
    .then(function (response) {
      var data = reponse.data;
      console.log(data);
      return data;
    });
  };

  return myService;
});

app.controller('MainCtrl', function( myService,$scope) {
  $scope.asyncData = myService.async();
  $scope.$watch('asyncData', function(asyncData) {
    if(angular.isDefined(asyncData)) {
      // Do something with the returned data, angular handle promises fine, you don't have to reassign the value to the scope if you just want to use it with angular directives
    }
  });

});

Una piccola dimostrazione in coffeescript: http://plunker.no.de/edit/ksnErx?live=preview

Il tuo plunker si è aggiornato con il mio metodo: http://plnkr.co/edit/mwSZGK?p=preview

Un modo molto migliore secondo me sarebbe qualcosa del genere:

Servizio:

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

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

        ...

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

        ...

        return deferred.promise;
    }

    return{
        getAllFruits:getAllFruits
    }

});

E nel controller puoi semplicemente usare:

$scope.fruits = FruitsManager.getAllFruits();

Angular inserirà automaticamente il risolto awesomeFruitsin $scope.fruits.

Ho avuto lo stesso problema, ma quando stavo navigando su Internet ho capito che $ http restituiva di default una promessa, quindi potevo usarlo con "then" dopo aver restituito i "dati". guarda il codice:

 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;
      });
 });

Quando si associa l'interfaccia utente all'array, è necessario assicurarsi di aggiornare lo stesso array direttamente impostando la lunghezza su 0 e spingendo i dati nell'array.

Invece di questo (che imposta un diverso riferimento dell'array di datacui la tua UI non sarà a conoscenza):

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

prova questo:

 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]);
      }
    });
  };

Ecco un violino che mostra la differenza tra l'impostazione di un nuovo array e lo svuotamento e l'aggiunta a uno esistente. Non sono riuscito a far funzionare il tuo plnkr, ma spero che questo funzioni per te!

A questo proposito ho riscontrato un problema simile, ma non con get o post realizzati da Angular ma con un'estensione creata da una terza parte (nel mio caso Chrome Extension).
Il problema che ho riscontrato è che l'estensione di Chrome non ritorna, then()quindi non sono stato in grado di farlo nel modo sopra indicato, ma il risultato è ancora asincrono.
Quindi la mia soluzione è quella di creare un servizio e procedere a un callback

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

Quindi nel mio controller

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

Spero che questo possa aiutare gli altri a ottenere lo stesso problema.

Ho letto http://markdalgleish.com/2013/06/using-promises-in-angularjs-views/ [AngularJS ci permette di semplificare la nostra logica del controller ponendo una promessa direttamente sull'ambito, anziché consegnare manualmente il risolto valore in un callback di successo.]

così semplice e pratico :)

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();
            });

Spero che questo aiuto

Non mi piace davvero il fatto che, a causa del modo "promettente" di fare le cose, il consumatore del servizio che utilizza $ http deve "sapere" su come decomprimere la risposta.

Voglio solo chiamare qualcosa e ottenere i dati, in modo simile al vecchio $scope.items = Data.getData();modo, che ora è deprecato .

Ho provato per un po 'e non ho trovato una soluzione perfetta, ma ecco il mio colpo migliore ( Plunker ). Potrebbe essere utile a qualcuno.

app.factory('myService', function($http) {
  var _data;  // cache data rather than promise
  var myService = {};

  myService.getData = function(obj) { 
    if(!_data) {
      $http.get('test.json').then(function(result){
        _data = result.data;
        console.log(_data);  // prove that it executes once
        angular.extend(obj, _data);
      }); 
    } else {  
      angular.extend(obj, _data);
    }
  };

  return myService;
}); 

Quindi controller:

app.controller('MainCtrl', function( myService,$scope) {
  $scope.clearData = function() {
    $scope.data = Object.create(null);
  };
  $scope.getData = function() {
    $scope.clearData();  // also important: need to prepare input to getData as an object
    myService.getData($scope.data); // **important bit** pass in object you want to augment
  };
});

I difetti che posso già individuare sono

• Devi passare l'oggetto a cui desideri aggiungere i dati , che non è un modello intuitivo o comune in Angolare
• getDatapuò accettare il objparametro solo nella forma di un oggetto (anche se potrebbe anche accettare un array), il che non sarà un problema per molte applicazioni, ma è un limite irritato
• Devi preparare l'oggetto di input $scope.datacon = {}per renderlo un oggetto (in sostanza quello che $scope.clearData()fa sopra), o = []per un array, o non funzionerà (stiamo già di dover assumere qualcosa su quali dati vengono). Ho provato a fare questo passo di preparazione IN getData, ma senza fortuna.

Tuttavia, fornisce un modello che rimuove la piastra di controllo "promettete da scartare" del controller e potrebbe essere utile nei casi in cui si desidera utilizzare determinati dati ottenuti da $ http in più di un posto mantenendolo ASCIUTTO.

Per quanto riguarda la memorizzazione nella cache della risposta in servizio, ecco un'altra versione che sembra più semplice di quella che ho visto finora:

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;
            });

    })();

});

questo servizio restituirà i dati memorizzati nella cache o $http.get;

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

Si prega di provare il codice qui sotto

È possibile dividere il controller (PageCtrl) e il servizio (dataService)

'use strict';
(function () {
    angular.module('myApp')
        .controller('pageContl', ['$scope', 'dataService', PageContl])
        .service('dataService', ['$q', '$http', DataService]);
    function DataService($q, $http){
        this.$q = $q;
        this.$http = $http;
        //... blob blob 
    }
    DataService.prototype = {
        getSearchData: function () {
            var deferred = this.$q.defer(); //initiating promise
            this.$http({
                method: 'POST',//GET
                url: 'test.json',
                headers: { 'Content-Type': 'application/json' }
            }).then(function(result) {
                deferred.resolve(result.data);
            },function (error) {
                deferred.reject(error);
            });
            return deferred.promise;
        },
        getABCDATA: function () {

        }
    };
    function PageContl($scope, dataService) {
        this.$scope = $scope;
        this.dataService = dataService; //injecting service Dependency in ctrl
        this.pageData = {}; //or [];
    }
    PageContl.prototype = {
         searchData: function () {
             var self = this; //we can't access 'this' of parent fn from callback or inner function, that's why assigning in temp variable
             this.dataService.getSearchData().then(function (data) {
                 self.searchData = data;
             });
         }
    }
}());