js_判断当前页面是否有网络和网络连接超时

2018-04-12

方法一：通过navigator.onLine属性判断，返回true为有联网状态，false为断网状态。

//方法一
if(navigator.onLine) {
    console.log('联网状态');
} else {
    console.log('断网状态');
};

 

方法二：通过请求后台接口返回error错误码，判断网络是否在联网，这里返回的有可能是连不上服务器（断网状态），也有可能是服务器出问题没有数据返回。

//方法二
function ajax(url, data, callback) {
    url = location.protocol + '//' + location.host + url,
        $.ajax({
            url: url,
            data: data,
            dataType: "json",
            type: "post",
            success: function(res) {
                console.log('成功回调数据！');
            },
            error: function() {
                console.log('网络连接失败！');
            }
        });
};

方法一确切的可以判断是否是联网状态，方法二不一定是没有网络的导致的，但问题的根源都是用户在操作页面的时候，和后台交互不成功给用户反馈。这两者

结合使用，就可以组成一个无网络状态和网络请求超时的情况，从而友好的提示用户。

function ajax(url, data, callback) {
    url = location.protocol + '//' + location.host + url,
        $.ajax({
            url: url,
            data: data,
            dataType: "json",
            type: "post",
            success: function(res) {
                console.log('成功回调数据！');
            },
            error: function() {
                if(navigator.onLine) {
                        console.log('网络连接失败！');
                    } else {
                        console.log('网络连接超时！');
                    };
            }
        });
};