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

Question

我需要你的帮助。

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

发生这种情况是因为起初没有网络并且失败，这会导致内部代码无法运行。

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

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

知道如何再次调用服务并在网络恢复时返回响应吗？

Answer 1

运行以下命令

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

在 index.html 中添加脚本引用，用于 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();
            }
        }
    }
})

Answer 2

我使用直接的cordova插件，您可以使用两种方法：

方法 1安装插件

$ cordova

plugin add cordova-plugin-dialogs

然后将代码添加到服务中：

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