捕获”;没有互联网连接”;AngularJS中

capture "no internet connection" in AngularJS

本文关键字:AngularJS 连接 捕获 互联网      更新时间:2023-12-30

我希望我的AngularJS应用程序捕获"无互联网连接",就像Chrome捕获它一样。当Chrome捕获它时,它会在console.log上显示net::ERR_internet_DISCONNECTED。

Angular的HTTP拦截器无法捕获它。我得到的唯一数据是rejection.data.status未定义拒绝状态0

到目前为止,这一切都很顺利。我注意到,当它无法联系任何东西时,状态为0。这是在我的http拦截器中

responseError: function (rejection) {
    if (rejection.status == 0) {
        // put whatever behavior you would like to happen
    }
    // .......
    return $q.reject(rejection);
}

一个可以帮助您的简单脚本,您可以用不同的方式来完成,甚至可以加载图像并在失败时调用函数。

function getNetworkStatus(callback, timeout, x){
    x = new XMLHttpRequest(); 
    x.timeout = timeout,
    x.onreadystatechange = function(){
        x.readyState == 4 && callback(x.status == 200)
    }, x.onerror = function(e){
        callback(!1)
    }, x.ontimeout = function(){
        callback(!1)
    }, (x.open("GET", "http://ip-api.com/json/"), x.send());
}
getNetworkStatus(function(isOnline){
    console.info(isOnline ? "ONLINE" : "OFFLINE");
},60000);

更新

我们在httpProvider中定义了这个拦截器,所以当调用没有成功时,严格地返回一个错误

angular.module('MyApp', []).config([
  '$httpProvider',
  function($httpProvider) {
    $httpProvider.interceptors.push([
      '$q',
      function($q) {
        return {
            responseError: function(res){
                console.info("Failed to open url: " + res.config.url, res);
                //Angular returns "success" by default, but we will call "error" if data were not obtained.
                if(res.data == null && res.status === 0 && res.statusText === ""){
                    return $q.reject(res) //callback error()
                }       
                return res //return default success()
            }
        };
      }
    ]);
  }
]).run(['$http', function($http) { // --TEST--
    //$http.get("http://ip-api.com/json/").success(function(){ //page online
    $http.get("https://ip-api.com/json/").success(function(){ //try "https" (page offline to test)
        console.info("My great page is loaded - We are online :)",arguments)
    }).error(function(){
        console.info("ERROR: My great online page is not loaded :/ - possibility of connection loss?",arguments)
    });
}]);

你可以更改一个你认为永远不会脱机的受信任URL,例如谷歌,但请记住,该URL应该具有不显示"访问控制允许来源"错误的来源访问权限。http://ip-api.com/json/可以。