0

在我的一个新项目中，我使用 AngularJS $resources 进行 http 调用。当没有互联网连接时，我需要显示本地数据（来自 SQLite）。

我通过以下步骤聚集了我的障碍，并在下面创建了示例代码

  • 第 1 步：单击按钮调用 $resource //Done
  • 第 2 步：在发送请求之前检查机器是否连接到网络 //Done
  • 第 3 步：如果网络已连接，则获取响应 //Done
  • 第 4 步：如果没有网络，则中止请求//完成
  • 第 5 步：如果没有网络将本地数据响应 $resource 承诺——不知道该怎么做。

var servicetest = angular.module('servicetest', ['ngResource'])
.factory('interceptors' ,function($rootScope, offlineCntrl){
  return {
      'request':function(request){
        if(!offlineCntrl.isOnline()){
          //there wont be a server call
          request.url='';
          //Abort the request
          request.timeout;
        }else{
          return request;
        }
      },
   
     'response':function(response){
        if(!offlineCntrl.isOnline()){
           offlineCntrl.assignLocal(request).then(function(data){
            //Get the local data here.
            // Have to pass this data to my response
            // At this stage I am getting an error attached below
            response.data = data;
            return response;
          })
          
        }else{
         return response;
        }
     }
   }
})
.config(function($httpProvider){
  $httpProvider.interceptors.push('interceptors');
})
.factory('offlineCntrl', function($q, $timeout){
  return {
    isOnline: function(){
      return navigator.onLine;
    },
    assignLocal:function(request){
      var defer = $q.defer();
      $timeout(function(){
        defer.resolve({title:"local", body:"Local local data context"});
      })
      return defer.promise;
    }
  }
})
.factory('CloudSerivce', function($resource){
  return $resource('https://jsonplaceholder.typicode.com/posts/:id', {
    id:'@id'
  }, {
     get:{
       method:"GET",
			 isArray:false,
			 cancellable: true
     }
  })
})
.controller('mainCntrl', function($scope, CloudSerivce){
  $scope.data = {};

  $scope.getCloudService = function(){
    CloudSerivce.get({id:1}).$promise.then(function(data){
      //It should receive local data if there is no network
      $scope.data = data;
    }, function(err){
      console.log(err)
    })
  }

})
<html ng-app="servicetest">
  <body ng-controller='mainCntrl'>
    <h1>{{data.title}}</h1>
    <p>{{data.body}}</p>
    <button ng-click='getCloudService()'>
      GET ITEMS
    </button>
    <h4>Try the button disabling your internet connection</h4>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
</html>

当我尝试使用延迟承诺事件返回响应时出现错误。

 TypeError: Cannot read property 'headers' of undefined
at f (angular.js:7520)
at C (angular.js:10924)
at angular.js:11010
at h.$eval (angular.js:11930)
at h.$digest (angular.js:11756)
at a.$apply (angular.js:12036)
at HTMLButtonElement.<anonymous> (angular.js:17871)
at angular.js:2612
at q (angular.js:309)
at HTMLButtonElement.c (angular.js:2611)

我可以通过冒泡 $rootScope 发射器并在控制器中捕获它来做到这一点，但我相信最简单的方法是在中止请求后破解 ngResource（CloudService $promise 事件）响应。这样我就可以保持控制器的getCloudService功能不变，它可以在离线和在线模式下工作。

4

3 回答 3

1

需要做这样的事情

.factory('interceptors' ,function($rootScope, offlineCntrl){
        return {
          'request':function(request){
            if(!offlineCntrl.isOnline()){
              //there wont be a server call
              request.url='';
              //Abort the request
              request.timeout;
            }else{
              return request;
            }
          },

          'response':function(response){
            const deferred = $q.defer();
            if(!offlineCntrl.isOnline()){
              offlineCntrl.assignLocal(request).then(function(data){
                deferred.resolve(data);
              });

            }else deferred.resolve(response);
            return deferred.promise;
          }
        }
      })
于 2016-12-08T05:31:53.440 回答
1

你在这里搞错了！

$scope.getCloudService = function(){
    CloudSerivce.get({id:1}).$promise.then(function(response){
      //It should receive local data if there is no network
      $scope.data = response.data;//modified
    })
  }

还要处理错误情况，您应该使用这样的东西吗？

 $scope.getCloudService = function(){
        CloudSerivce.get({id:1}).$promise.then(function(response){
          //It should receive local data if there is no network
          $scope.data = response.data;//modified
        }),function(error){
             //ERROR HANDLING 
        });
 }
于 2016-12-08T04:53:46.977 回答
0

解决了以下工作。

var servicetest = angular.module('servicetest', ['ngResource'])
.factory('interceptors' ,function($rootScope, offlineCntrl, $q){
  return {
      'request':function(request){
        if(!offlineCntrl.isOnline()){
          //there wont be a server call
          request.url='';
          //Abort the request
          request.timeout;
        }else{
          return request;
        }
      },
   
     'response':function(response){
        if(!offlineCntrl.isOnline()){
           var deferred = $q.defer();
           offlineCntrl.assignLocal(request).then(function(data){
            //Get the local data here.
            // Have to pass this data to my response
            // At this stage I am getting an error attached below
            response = data;
            return deferred.resolve(response);
          })
          return ( deferred.promise );
        }else{
         return response;
        }
     }
   }
})
.config(function($httpProvider){
  $httpProvider.interceptors.push('interceptors');
})
.factory('offlineCntrl', function($q, $timeout){
  return {
    isOnline: function(){
      return navigator.onLine;
    },
    assignLocal:function(request){
      var defer = $q.defer();
      $timeout(function(){
        defer.resolve({title:"local", body:"Local local data context"});
      })
      return defer.promise;
    }
  }
})
.factory('CloudSerivce', function($resource){
  return $resource('https://jsonplaceholder.typicode.com/posts/:id', {
    id:'@id'
  }, {
     get:{
       method:"GET",
			 isArray:false,
			 cancellable: true
     }
  })
})
.controller('mainCntrl', function($scope, CloudSerivce){
  $scope.data = {};

  $scope.getCloudService = function(){
    CloudSerivce.get({id:1}).$promise.then(function(data){
      //It should receive local data if there is no network
      $scope.data = data;
    }, function(err){
      console.log(err)
    })
  }

})
<html ng-app="servicetest">
  <body ng-controller='mainCntrl'>
    <h1>{{data.title}}</h1>
    <p>{{data.body}}</p>
    <button ng-click='getCloudService()'>
      GET ITEMS
    </button>
    <h4>Try the button disabling your internet connection</h4>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
</html>

于 2016-12-08T05:26:22.190 回答