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('网络连接超时！');
                     };
             }
         });
 };