如何中止或取消 Angularjs $resource 请求并通过本地数据覆盖响应

Question

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

我已经通过以下步骤归类了我的障碍，并在下面创建了示例代码

第 1 步： 单击按钮调用 $resource //Done
步骤 2： 在发送请求之前检查机器是否连接到网络 //完成
第 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>

当我尝试 return 延迟承诺事件的响应时出现错误。

 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 事件）响应。这样我就可以保持controller的getCloudService功能不变，可以在离线和在线模式下工作。

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

Answer 2

解决了以下问题。

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>

Answer 3

需要做那样的事情

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

如何中止或取消 Angularjs $resource 请求并通过本地数据覆盖响应

How to abort or cancel an Angularjs $resource request and override the response by a local data

angularjs

ngresource

angular-http-interceptors

angularjs-ng-resource