Verarbeitung der $ http-Antwort im Dienst

Ich habe kürzlich eine detaillierte Beschreibung des Problems veröffentlicht, mit dem ich hier bei SO konfrontiert bin . Da ich keine tatsächliche $httpAnfrage senden konnte , habe ich Timeout verwendet, um asynchrones Verhalten zu simulieren. Die Datenbindung von meinem Modell zur Ansicht funktioniert mithilfe von @Gloopy ordnungsgemäß

Wenn ich jetzt $httpanstelle von $timeout(lokal getestet) verwende, kann ich feststellen, dass die asynchrone Anforderung erfolgreich war und datain meinem Dienst mit einer JSON-Antwort gefüllt ist. Meine Ansicht wird jedoch nicht aktualisiert.

Plunkr hier aktualisiert

Hier ist ein Plunk, der macht, was Sie wollen: http://plnkr.co/edit/TTlbSv?p=preview

Die Idee ist, dass Sie direkt mit Versprechungen und deren "Dann" -Funktionen arbeiten, um die asynchron zurückgegebenen Antworten zu bearbeiten und darauf zuzugreifen.

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

Hier ist eine etwas kompliziertere Version, die die Anforderung zwischenspeichert, sodass Sie sie nur beim ersten Mal erstellen ( 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;
    });
  };
});

Lass es einfach sein. Es ist so einfach wie

1. Rückkehr promisein Ihren Service (keine Notwendigkeit, thenim Service zu verwenden)
2. Verwenden Sie thenin Ihrem 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;
  });
});

Da es asynchron $scopeist, werden die Daten abgerufen, bevor der Ajax-Aufruf abgeschlossen ist.

Sie können es $qin Ihrem Dienst verwenden, um promisees zu erstellen und an den Controller zurückzugeben, und der Controller erhält das Ergebnis innerhalb des then()Aufrufs gegen promise.

In Ihrem Dienst,

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

Dann in Ihrem Controller:

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

tosh shimayama hat eine Lösung, aber Sie können viel vereinfachen, wenn Sie die Tatsache nutzen, dass $ http Versprechen zurückgibt und dass Versprechen einen Wert zurückgeben können:

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

});

Eine kleine Demonstration in Coffeescript: http://plunker.no.de/edit/ksnErx?live=preview

Ihr Plunker wurde mit meiner Methode aktualisiert: http://plnkr.co/edit/mwSZGK?p=preview

Ein viel besserer Weg, denke ich, wäre so etwas:

Bedienung:

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

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

        ...

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

        ...

        return deferred.promise;
    }

    return{
        getAllFruits:getAllFruits
    }

});

Und in der Steuerung können Sie einfach verwenden:

$scope.fruits = FruitsManager.getAllFruits();

Angular setzt das aufgelöste automatisch awesomeFruitsin das $scope.fruits.

Ich hatte das gleiche Problem, aber als ich im Internet surfte, verstand ich, dass $ http standardmäßig ein Versprechen zurückgibt, dann könnte ich es mit "dann" verwenden, nachdem ich die "Daten" zurückgegeben habe. Schauen Sie sich den Code an:

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

Wenn Sie die Benutzeroberfläche an Ihr Array binden, sollten Sie sicherstellen, dass Sie dasselbe Array direkt aktualisieren, indem Sie die Länge auf 0 setzen und die Daten in das Array übertragen.

Stattdessen (wodurch eine andere Array-Referenz festgelegt wird, von datader Ihre Benutzeroberfläche nichts weiß):

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

Versuche dies:

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

Hier ist eine Geige , die den Unterschied zwischen dem Festlegen eines neuen Arrays und dem Leeren und Hinzufügen zu einem vorhandenen Array zeigt. Ich konnte dein plnkr nicht zum Laufen bringen, aber hoffentlich funktioniert das für dich!

Im Zusammenhang damit habe ich ein ähnliches Problem durchlaufen, jedoch nicht mit get oder post von Angular, sondern mit einer Erweiterung von einem Drittanbieter (in meinem Fall Chrome Extension).
Das Problem, mit dem ich konfrontiert war, ist, dass die Chrome-Erweiterung nicht zurückgegeben then()wird. Daher konnte ich dies nicht wie in der obigen Lösung tun, aber das Ergebnis ist immer noch asynchron.
Meine Lösung besteht also darin, einen Dienst zu erstellen und zu einem Rückruf überzugehen

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

Dann in meinem Controller

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

Hoffe, dies kann anderen helfen, das gleiche Problem zu bekommen.

Ich habe http://markdalgleish.com/2013/06/using-promises-in-angularjs-views/ gelesen. [AngularJS ermöglicht es uns, unsere Controller-Logik zu optimieren, indem wir ein Versprechen direkt auf den Bereich legen, anstatt das Gelöste manuell zu übergeben Wert in einem erfolgreichen Rückruf.]

so einfach und praktisch :)

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

Ich hoffe das hilft

Ich mag die Tatsache wirklich nicht, dass der Verbraucher des Dienstes, der $ http verwendet, aufgrund der "vielversprechenden" Vorgehensweise "wissen" muss, wie die Antwort entpackt werden soll.

Ich möchte nur etwas anrufen und die Daten herausholen, ähnlich wie bei der alten $scope.items = Data.getData();Methode, die jetzt veraltet ist .

Ich habe es eine Weile versucht und keine perfekte Lösung gefunden, aber hier ist mein bester Schuss ( Plunker ). Es kann für jemanden nützlich sein.

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

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

Mängel, die ich bereits erkennen kann, sind

• Sie müssen das Objekt übergeben, zu dem die Daten hinzugefügt werden sollen. Dies ist in Angular kein intuitives oder allgemeines Muster
• getDatakann den objParameter nur in Form eines Objekts akzeptieren (obwohl er auch ein Array akzeptieren könnte), was für viele Anwendungen kein Problem darstellt, aber eine schmerzhafte Einschränkung darstellt
• Sie haben die Eingabeobjekt vorzubereiten $scope.datamit = {}ihm ein Objekt ( im Wesentlichen , was zu machen $scope.clearData()oben der Fall ist), oder = []für ein Array, oder es wird nicht funktionieren (wir haben schon etwas zu übernehmen , welche Daten kommt). Ich habe versucht, diesen Vorbereitungsschritt IN durchzuführen getData, aber kein Glück.

Nichtsdestotrotz bietet es ein Muster, das das Controller-Boilerplate "Versprechen auspacken" entfernt und in Fällen nützlich sein kann, in denen Sie bestimmte Daten aus $ http an mehr als einer Stelle verwenden möchten, während Sie es trocken halten.

Was das Zwischenspeichern der Antwort im Dienst betrifft, ist hier eine andere Version, die direkter zu sein scheint als das, was ich bisher gesehen habe:

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

    })();

});

Dieser Dienst gibt entweder die zwischengespeicherten Daten zurück oder $http.get;

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

Bitte versuchen Sie den folgenden Code

Sie können den Controller (PageCtrl) und den Service (dataService) aufteilen.

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