Question

我正在创建一个＆＃34; Web Planner＆＃34;用户必须在不同页面上完成许多步骤才能为我们的服务创建订单。我知道我需要使用服务才能在整个Planner中共享某些数据，但我仍然不确定如何去做。

问题是用户不一定每次都按顺序进行。他们可以在任何页面停止，然后稍后返回并恢复，因此我需要一种方法来管理一些API数据，这样如果用户在共享相同数据的2个页面中的1个页面上，则数据将通过API从服务器获取或者只是在数据已被采集时分配。

现在，我想到的唯一方法是将API请求放在我的服务中，然后当我运行像OrderService.get()这样的服务时，服务将处理逻辑以检查数据是否已从服务器。如果它只是一个简单的赋值，如$scope.model = OrderService.get()，但问题是，如果数据尚未加载，那么我需要在某处使用promise来等待数据，所以a简单的任务操作就不够了。

此服务可能如下所示：

app.factory('OrderService', function(){
    var orders = []; // This is the actual data

    var service = {};

    service.get = function(id){
        if(orders.length){
             return orders; // This means there is already data available
        }else{
             // This is where I am not sure what to do...
             // Maybe...
             var promise = API.Orders.getAllOrders({id : id}, function(res){
                    // Not sure about how to implement this part
             }).$promise;

             return promise;
        }
    }


})

有没有人有其他想法？

Answer 1

只需始终返回一个承诺，无论数据是否已经存在，或者是通过调用服务器获取的。在你的例子..

   if(orders.length){
         return $q.when(orders); // This means there is already data available
    }else{
         // This is where I am not sure what to do...
         // Maybe...
         var promise = API.Orders.getAllOrders({id : id}, function(res){
                // Not sure about how to implement this part
         }).$promise;

         return promise;
    }

Answer 2

由于您的呼叫是异步的，唯一的方法是通过promises

app.service('OrderService', function($q){ // import $q ; the angularjs promise

    var orders = []; // This is the actual data

    var service = {};

    service.get = function(id){
        var deferred = $q.defer(); // create a unit of work to be done; a promise

        if(orders.length){ // if data is already available, resolve the promise
             deferred.resolve(orders); // This means there is already data available, so mark as resolved and successful
        }else{
             // make your async call since you don't have data
             API.Orders.getAllOrders({id : id}, function(response){
                // here you can actually modify the response before it goes back to your controller
                deferred.resolve(response); 
             }, function(reason){ // failure scenario
                deferred.reject(reason); 
             })

        }
        return deferred.promise; // always return promise
    }
})

Answer 3

请记住，我还是初学者（阅读大量文档），所以这可能不是100％正确。

您的服务将是这样的：

app.factory('OrderService', function($q){
    var orders = []; // This is the actual data

    return {
      getData: function(id){
        var deferred = $q.defer();

        if(orders.length){
             deferred.resolve(orders); // This means there is already data available
        }else{
             $http.get('/api/get/data/' + id)
               .success(function(data) {
                  deferred.resolve(data);
               })
               .error(function(){
                  deferred.reject();
               });
        }

        return deferred.promise;
     }
})

然后在你的控制器上你只需要像这样使用它：

app.controller('MainCtrl', function($scope, OrderService) {
   var id = 1;
   $scope.data = OrderService.getData(id);
});

如何使用Angular服务跨控制器/页面共享数据？

3 个答案: