ajax - $http 错误处理 : distinguishing user offline from other errors

Question

我有一个简单的联系表单，Angular 通过 AJAX 将其提交到我在 Google App Engine 上的应用程序。 (POST 处理程序使用 send_mail 函数向网站所有者发送电子邮件)。这是客户端代码:

$http.post('', jQuery.param(user), {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
}).success(function(data, status, headers, config) {
    //...                        
}).error(function(data, status, headers, config) {
    alert('Please check your Internet connection and try again.');
});

显然 alert() 正在处理所有错误。假设我的服务器端代码没有错误，我猜测 App Engine 返回除 HTTP 状态代码 200 以外的任何内容的可能性很小。但是我仍然想区分服务器错误和用户失去连接。

我正在考虑根据 this SO answer 使用 XMLHttpRequest 的 textStatus ，但它似乎对 $http.error() 回调不可用。我也想到了使用 Offline.js但我不需要它所做的大部分工作，因此在这种情况下看起来像是浪费了字节。

$http.error() status 我在 offline 为 0 时得到，但我不确定跨浏览器的可靠性如何。我应该使用什么？

Answer 1

在给你解决方案之前，我只想强调浏览器提供的 is-offline 标志的问题

1. 不同浏览器的离线标志有不同的含义

   一个。对于某些浏览器，这意味着互联网不存在

   对于某些浏览器，这意味着内网不存在

   有些浏览器确实允许离线模式，因此即使没有互联网，您实际上也不是离线的。

2. 并非所有浏览器都以一致的方式支持离线

我在使用基于浏览器的标志时遇到的另一个问题是开发场景，其中不需要互联网，并且不应触发离线模式(对我来说，如果我的网站离线，我会阻止所有用户交互)。您可以通过另一个指示器告诉您是否处于开发/生产等状态来解决此问题。

最重要的是，为什么我们关心浏览器是否处于离线模式，因为我们只关心我们的网站是否可以访问，我们实际上并不关心互联网是否存在。所以即使浏览器告诉我们它处于离线状态，它也不是我们想要的。我们想要的和浏览器提供的之间存在细微差别。

所以考虑到以上所有，我已经使用离线指令解决了这个问题，如果用户离线，我用它来阻止用户交互

csapp.directive('csOffline', ["$http", '$interval', "$timeout", "$modal", function ($http, $interval, $timeout, $modal) {
    var linkFn = function (scope) {

        scope.interval = 10; //seconds

        var checkConnection = function () {

            $http({
                method: 'HEAD',
                url: document.location.pathname + "?rand=" + Math.floor((1 + Math.random()) * 0x10000)
            })
                .then(function (response) {
                     $scope.isOnline = true;
                }).catch(function () {
                     $scope.isOnline = false;
                });
        };

        scope.isOnline = true;

        $interval(checkConnection, scope.interval * 1000);

        scope.$watch('isOnline', function (newVal) {
            console.log("isOnline: ", newVal);
            //custom logic here
        });

    };

    return {
        scope: {},
        restrict: 'E',
        link: linkFn,
    };
}]);

我正要使用 offline.js，它太多了，而且大部分我都不需要，所以这是我想出的解决方案，它完全在 angular.js 中。

请注意，在这些调用期间会调用 http 拦截器，我想避免这种情况，因此我在调用中使用了 $.ajax

        $.ajax({
            type: "HEAD",
            url: document.location.pathname + "?rand=" + Math.floor((1 + Math.random()) * 0x10000),
            contentType: "application/json",
            error: function () {
                scope.isOnline = false;
            },
            success: function (data, textStatus, xhr) {
                var status = xhr.status;
                scope.isOnline = status >= 200 && status < 300 || status === 304;
            }
        }
        );

您可以将 isOnline true/false 中的逻辑替换为您想要的任何自定义逻辑。