Xử lý phản hồi $ http trong dịch vụ

Gần đây tôi đã đăng một mô tả chi tiết về vấn đề tôi đang gặp phải ở đây tại SO. Vì tôi không thể gửi $httpyêu cầu thực tế , tôi đã sử dụng thời gian chờ để mô phỏng hành vi không đồng bộ. Liên kết dữ liệu từ mô hình của tôi để xem hoạt động chính xác, với sự trợ giúp của @Gloopy

Bây giờ, khi tôi sử dụng $httpthay vì $timeout(được thử nghiệm cục bộ), tôi có thể thấy yêu cầu không đồng bộ đã thành công và datachứa đầy phản hồi json trong dịch vụ của tôi. Nhưng, quan điểm của tôi không cập nhật.

cập nhật Plunkr tại đây

Đây là một Plunk thực hiện những gì bạn muốn: http://plnkr.co/edit/TTlbSv?p=preview

Ý tưởng là bạn làm việc với các lời hứa trực tiếp và các chức năng "sau đó" của chúng để thao tác và truy cập các phản hồi được trả lại không đồng bộ.

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

Đây là một phiên bản phức tạp hơn một chút lưu trữ yêu cầu để bạn chỉ thực hiện lần đầu tiên ( 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;
    });
  };
});

Hãy để nó đơn giản. Nó đơn giản như

1. Quay trở lại promisedịch vụ của bạn (không cần sử dụng thendịch vụ)
2. Sử dụng thentrong bộ điều khiển của bạn

Bản giới thiệu. 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;
  });
});

Bởi vì nó không đồng bộ, $scopenên việc lấy dữ liệu trước khi cuộc gọi ajax hoàn tất.

Bạn có thể sử dụng $qtrong dịch vụ của mình để tạo promisevà trả lại cho bộ điều khiển và bộ điều khiển có được kết quả trong then()cuộc gọi promise.

Trong dịch vụ của bạn,

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

Sau đó, trong bộ điều khiển của bạn:

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

tosh shimayama có một giải pháp nhưng bạn có thể đơn giản hóa rất nhiều nếu bạn sử dụng thực tế là $ http trả lại lời hứa và lời hứa đó có thể trả về giá trị:

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

});

Một minh chứng nhỏ trong coffeescript: http://plunker.no.de/edit/ksnErx?live=preview

Plunker của bạn được cập nhật theo phương pháp của tôi: http://plnkr.co/edit/mwSZGK?p=preview

Một cách tốt hơn nhiều tôi nghĩ sẽ là một cái gì đó như thế này:

Dịch vụ:

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

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

        ...

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

        ...

        return deferred.promise;
    }

    return{
        getAllFruits:getAllFruits
    }

});

Và trong bộ điều khiển bạn chỉ cần sử dụng:

$scope.fruits = FruitsManager.getAllFruits();

Angular sẽ tự động đưa giải quyết awesomeFruitsvào $scope.fruits.

Tôi cũng gặp vấn đề tương tự, nhưng khi tôi lướt web trên mạng, tôi hiểu rằng $ http trở lại theo mặc định là một lời hứa, sau đó tôi có thể sử dụng nó với "sau đó" sau khi trả lại "dữ liệu". nhìn vào mã:

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

Khi liên kết UI với mảng của bạn, bạn sẽ muốn đảm bảo rằng bạn cập nhật trực tiếp cùng mảng đó bằng cách đặt độ dài thành 0 và đẩy dữ liệu vào mảng.

Thay vì điều này (thiết lập một tham chiếu mảng khác datamà UI của bạn sẽ không biết):

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

thử cái này:

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

Dưới đây là một câu đố cho thấy sự khác biệt giữa việc thiết lập một mảng mới so với làm trống và thêm vào một mảng hiện có. Tôi không thể làm cho plnkr của bạn hoạt động nhưng hy vọng điều này sẽ làm việc cho bạn!

Liên quan đến vấn đề này, tôi đã trải qua một vấn đề tương tự, nhưng không phải là lấy hoặc đăng bởi Angular mà là một tiện ích mở rộng được tạo bởi bên thứ 3 (trong trường hợp của tôi là Tiện ích mở rộng Chrome).
Vấn đề mà tôi gặp phải là Tiện ích mở rộng Chrome sẽ không quay trở lại then()nên tôi không thể thực hiện theo cách trong giải pháp trên nhưng kết quả vẫn không đồng bộ.
Vì vậy, giải pháp của tôi là tạo ra một dịch vụ và tiến hành gọi lại

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

Sau đó, trong bộ điều khiển của tôi

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

Hy vọng điều này có thể giúp những người khác nhận được cùng một vấn đề.

Tôi đã đọc http://markdalgleish.com/2013/06/USE-promises-in-angularjs-view/ [AngularJS cho phép chúng tôi hợp lý hóa logic bộ điều khiển của mình bằng cách đặt lời hứa trực tiếp trên phạm vi, thay vì tự xử lý giải quyết giá trị trong một cuộc gọi lại thành công.]

thật đơn giản và tiện dụng :)

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

Hy vọng điều này giúp đỡ

Tôi thực sự không thích thực tế rằng, vì cách thực hiện "lời hứa", người tiêu dùng dịch vụ sử dụng $ http phải "biết" về cách giải nén phản hồi.

Tôi chỉ muốn gọi một cái gì đó và lấy dữ liệu ra, tương tự như $scope.items = Data.getData();cách cũ , hiện không được dùng nữa .

Tôi đã thử một lúc và không đưa ra được giải pháp hoàn hảo, nhưng đây là bức ảnh đẹp nhất của tôi ( Plunker ). Nó có thể hữu ích cho một ai đó.

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

Sau đó, bộ điều khiển:

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

Lỗ hổng tôi có thể phát hiện ra là

• Bạn phải truyền vào đối tượng mà bạn muốn dữ liệu được thêm vào , đây không phải là mẫu trực quan hoặc phổ biến trong Angular
• getDatachỉ có thể chấp nhận objtham số ở dạng đối tượng (mặc dù nó cũng có thể chấp nhận một mảng), điều này sẽ không phải là vấn đề đối với nhiều ứng dụng, nhưng đó là một hạn chế đau
• Bạn cần phải chuẩn bị những đối tượng đầu vào $scope.datavới = {}để làm cho nó một đối tượng (thực chất là những gì $scope.clearData()làm ở trên), hoặc = []cho một mảng, hoặc nó sẽ không làm việc (chúng tôi đã phải thừa nhận điều gì đó về những dữ liệu đang đến). Tôi đã cố gắng thực hiện bước chuẩn bị này VÀO getData, nhưng không có may mắn.

Tuy nhiên, nó cung cấp một mẫu loại bỏ bản tóm tắt "hứa ​​hẹn không điều khiển" của bộ điều khiển và có thể hữu ích trong trường hợp khi bạn muốn sử dụng một số dữ liệu nhất định thu được từ $ http ở nhiều nơi trong khi vẫn giữ DRY.

Theo như bộ nhớ đệm, phản hồi trong dịch vụ có liên quan, đây là một phiên bản khác có vẻ thẳng hơn so với những gì tôi đã thấy cho đến nay:

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

    })();

});

dịch vụ này sẽ trả về dữ liệu được lưu trong bộ nhớ cache hoặc $http.get;

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

Vui lòng thử mã dưới đây

Bạn có thể tách bộ điều khiển (PageCtrl) và dịch vụ (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;
             });
         }
    }
}());