Question

我想通过点击公共云上的像素来检查互联网连接。根据响应，我想显示用户是否连接到Internet的警报。以下是像素加载的代码（$ q在服务中注入，具有以下功能）：

  hasInternetConnection = function(pingUrl){
var img,
  pingUrl = Constant.ImageUrl;

var deferred = $q.defer();

img = document.createElement('img');
img.onerror = deferred.reject(false);
img.onload = deferred.resolve(true)
img.src = pingUrl;

return deferred.promise
}

现在根据我想要做的返回值：

var con = hasInternetConnection()
if(!con){
  alert('No connection')
}

但这不起作用。有什么建议吗？

如何在单元测试中测试警报弹出窗口？

感谢。

Answer 1

在理解如何使用此任务的承诺以及如何为图像分配回调时，有很多问题。

这是您的功能的清理版本：

function hasInternetConnection() {
    var timer, timeoutTime = 4000;
    var defer = $q.defer();

    var img = new Image();
    img.onload = function() {
        clearTimeout(timer);
        defer.resolve(true);
    }
    img.onerror = img.onabort = function() {
        defer.resolve(false);
    }
    img.src = Constant.ImageUrl + "?rand=" + 
        (Math.random() + "").replace(".", "") + "_" + (new Date().getTime());

    // set max time to wait
    timer = setTimeout(img.onerror, timeoutTime);
    return defer.promise;    
}

hasInternetConnection().then(function(connected) {
    if (connected) {
        // have internet here
    } else {
        // no internet here
    }
});

工作演示：http://jsfiddle.net/jfriend00/2xr4rzqq/

更改/修复摘要：

将缓存清除值添加到网址，这样您就不会意外地从缓存中获取图片。
将承诺的使用更改为.then()处理程序。
正确地将onerror和onload指定为可以在以后调用的实际函数引用。
添加超时，因为系统超时未知，因此可以更好地控制等待的时间。
更改两个分辨率以使用.resolve()，因为调用者似乎更容易检查promise值boolean而不是两个处理程序。这纯粹是一种设计选择。
删除pingUrl参数，因为您没有使用该参数
使用new Image()代替document.createElement("img")
包含onabort处理程序以确保完整性。

Answer 2

要解决您可能甚至不知道的问题，请尝试 Offline （3kb缩小和压缩），或者至少阅读README.md。

你会看到作者不再使用云端托管文件（默认情况下）'/ favicon.ico'（在相同的来源）或任何会给出204（无内容）的内容。

不推荐使用图像技术，因为无法将404（找不到文件）与真正的连接问题区分开来。从v0.7.0开始，使用XHR进行离线检查，即使404（或204）表示“已连接”也是如此。

使用离线功能，您还可以获得一些很棒的糖，例如'checkOnLoad'，'interceptRequests'和'reconnect'选项。

如何检查承诺返回值并在angularjs中采取行动？

2 个答案: