AngularJS网络状态时重新加载服务离线

问题描述：

我想在没有网络的情况下刷新服务。当它离线时，它可以工作。但是当它返回到ONLINE状态时，它返回成功结果时会丢失内部代码。

发生这种情况是因为一开始没有网络，导致内部代码无法运行。

在controller.js的代码是：

.controller('Home', function($scope, $state, Service_Caller) { 
    var url = "http://localhost:8080/getUsers"; 

    Service_Caller.get(url, "GET", Service_Caller).then(function(resp) { 
     // return this is status network is online. 
     // in case offline, when refresh service again and network return online, service return response but this line not run. 
     console.log(resp); 
    }); 
})

service.js

.factory('Service_Caller', function($http, $ionicPopup, $rootScope) { 
    return { 
    get: function (url_call, method, tryagain) { 
     return $http({ 
       method: method, 
       url: url_call, 
       headers: {'Accept': 'application/json'} 
      }).success(function(response){ 

       //****** if ONLINE! ******* 
       return response.data; 

      }).error(function(err, status){ 

       //****** if OFFLINE! ******* 

       if(status == 0 || status == 502){ 
        var confirmPopup = $ionicPopup.confirm({ 
        title: "Error", 
        template: '<div class="col-100 text-center">No hay conexión de internet</div>', 
        buttons: [{ 
         text: '<i class="ion-android-hand"></i>&nbsp;Cancelar', 
         type: 'button-default', 
         onTap: function(e) { 
         return false; 
         } 
        }, { 
         text: '<i class="ion-android-refresh"></i>&nbsp;Refrescar', 
         type: 'button-assertive', 
         onTap: function(e) { 

         // execute again service. 
         tryagain.get(url_call, method, tryagain); 

         } 
        }] 
        }); 
       } 

      }); 
     } 
    } 
})

任何想法，我能如何再次调用服务和网络恢复时返回响应？

答

运行下面的命令

npm install ngCordova 
cordova plugin add cordova-plugin-network-information

index.html中添加脚本refrences为ngCordova

进样$ cordovaNetwork到您的工厂

.factory('Service_Caller', 
function($http, $ionicPopup, $rootScope, $cordovaNetwork) { 
    return { 
    get: function (url_call, method, tryagain) { 
     var isOnline = $cordovaNetwork.isOnline(); 
     var isOffline = $cordovaNetwork.isOffline(); 
     var errorHandler=function(){ 
      if(status == 0 || status == 502){ 
         var confirmPopup = $ionicPopup.confirm({ 
         title: "Error", 
         template: '<div class="col-100 text-center">No hay conexión de internet</div>', 
         buttons: [{ 
          text: '<i class="ion-android-hand"></i>&nbsp;Cancelar', 
          type: 'button-default', 
          onTap: function(e) { 
          return false; 
          } 
         }, { 
          text: '<i class="ion-android-refresh"></i>&nbsp;Refrescar', 
          type: 'button-assertive', 
          onTap: function(e) { 

          // execute again service. 
          tryagain.get(url_call, method, tryagain); 

          } 
         }] 
         }); 
        } 
      } 

      if($cordovaNetwork.isOnline()) 
      { 

       $http({ 
         method: method, 
         url: url_call, 
         headers: {'Accept': 'application/json'} 
        }).success(function(response){ 

         return response.data; 

        }).error(function(err, status){ 
         errorHandler(); 
         //****** if OFFLINE! ******* 
        }); 
      } 
      else 
      { 
       errorHandler(); 
      } 
     } 
    } 
})

答

我用直科尔多瓦插件，并有你可以使用两种方法：

方法1 安装插件

$科尔多瓦插件添加科尔多瓦 - 插件的对话框

然后将代码添加到您的服务：

document.addEventListener("deviceready", function() { 
    document.addEventListener("offline", onOffline, false); 
    function onOffline() { 

    function onDismissed() { 
     navigator.app.exitApp(); 
     //or do other things 
    } 

    navigator.notification.alert(
     'Netowrk Error', 
     onDismissed, 
     'Network error message', 
     'OK' 
    ); 
    } 
}, false);

方法2 安装插件

$科尔多瓦插件添加科尔多瓦 - 插件网络信息

代码然后添加到您的服务：

document.addEventListener("deviceready", function() { 
    document.addEventListener("offline", onOffline, false); 

    function onOffline() { 
     // Handle the offline event 
    } 

    document.addEventListener("online", onOnline, false); 

    function onOnline() { 
     // Handle the offline event 
    } 
}, false);

AngularJS网络状态时重新加载服务离线

相关推荐