javascript - capture "no internet connection" in AngularJS - Stack Overflow

admin管理员组

文章数量:1279055

I would like my AngularJS app to capture "no internet connection" just like how Chrome captures it. When Chrome captures it, it shows net::ERR_INTERNET_DISCONNECTED on the console.log.

Angular's HTTP interceptor is not able to capture it. The only data I get is rejection.data.status undefined rejection.status 0

I would like my AngularJS app to capture "no internet connection" just like how Chrome captures it. When Chrome captures it, it shows net::ERR_INTERNET_DISCONNECTED on the console.log.

Angular's HTTP interceptor is not able to capture it. The only data I get is rejection.data.status undefined rejection.status 0

• javascript
• angularjs

Share Improve this question Follow asked Feb 18, 2015 at 15:49 devwannabedevwannabe 3,21088 gold badges4444 silver badges8282 bronze badges 1

• possible duplicate of Detect that the Internet connection is offline? – callmekatootie Commented Feb 18, 2015 at 15:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

So far, this has been working great. I noticed that the status is 0 when it can't contact anything. This is inside my http interceptor

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

A simple script that could help you, you could do it in different ways, even loading an image and call a function when this fails.

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./json/"), x.send());
}

getNetworkStatus(function(isOnline){
    console.info(isOnline ? "ONLINE" : "OFFLINE");
},60000);

UPDATE

We define this interceptor in httpProvider, so return strictly an error when a call does not happen successfully

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./json/").success(function(){ //page online
    $http.get("https://ip-api./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)
    });
}]);

You can change a trusted URL that you think will never be offline, for example Google, but remember, the url should have origin access permissions that does not show the "Access-Control-Allow-Origin" error. http://ip-api./json/ is ok.

本文标签： javascriptcapture quotno internet connectionquot in AngularJSStack Overflow