javascript - 如何检查 promise 返回值并在angularjs中采取行动？

Question

我想通过点击公共(public)云上的像素来检查互联网连接。根据响应，无论用户是否连接到 Internet，我都想显示一个警报。以下是像素加载的代码(在服务中注入(inject)$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

您对如何使用 promise 执行此任务甚至如何为图像分配回调的理解都存在很多错误。

这是您的函数的清理版本:

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/

更改/修复摘要:

1. 将缓存破坏值添加到 URL，这样您就不会不小心从缓存中获取图像。
2. 将 promise 的使用更改为 .then() 处理程序。
3. 将onerror和onload正确赋值给实际的函数引用，以后可以调用。
4. 添加超时，因为系统超时未知，这样您就可以更好地控制等待时间。
5. 将两个解决方案更改为使用 .resolve()，因为对于调用者来说，只检查 promise 值 bool 值而不是使用两个处理程序似乎更容易。这纯粹是一种设计选择。
6. 删除 pingUrl 参数，因为您没有使用该参数
7. 使用 new Image() 代替 document.createElement("img")
8. 包含 onabort 处理程序以确保完整性。