跨浏览器获取响应验证

Question

如何以跨浏览器工作的方式检查来自 JavaScript 提取的响应是否有效（状态 200）？

我找到的唯一解决方案是将响应读取为 ArrayBuffer 并逐字节手动检查内容以查看它是否是有效文件。不太实用。

在我的情况下，获取是在服务工作者中，所以我不知道正在获取什么样的资源（html 文档、图像、二进制文件等），我只想根据它采取不同的操作成功与否。

fetch('http://example.com/some_resource')
.then(function(response)
{
   if (response.ok)
   {
       // Works for most browsers, but not Chrome and Firefox on Android 
   }
   response.arrayBuffer().thenCheckEveryByteOfTheFile;  // Do I really have to do this?
});

更新： MDN 文档是错误的。 Response.ok 是为 Android 上的 Chrome 和 Firefox 定义的。

https://github.com/mdn/browser-compat-data/issues/9309

Answer 1

不幸的是，截至今天，MDN 表示，fetch() 对象的属性并不（官方）完全兼容，尤其是在移动端与 Android 上的 Chrome/Firefox/Opera 兼容。

这不是您的选择，因为您使用的是 Service Worker，它已放弃常规 Ajax 支持。 XHR 不会在那里定义，您只能使用fetch() API。

否则，您可以使用XMLHttpRequest，它保留了完整的官方跨浏览器兼容性。

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/some_resource');
xhr.send();

//When response is received
xhr.onload = function() {
  if (xhr.status == 200) { // xhr.status is compatible with Android
        console.log(xhr.response); 
        //OK!
  } else { 
        console.log(xhr.response); 
        //OOPS, not OK!
  }
};

不管怎样，如果你尝试编写这个脚本：

window.onload = function() {
    fetch('https://whateverfreeapiyoucanthink.of')
    .then(function(response)
    {
       alert(response.status);
    });
    }

然后从 Android 设备打开页面，它对我来说都适用 Chrome 88 和 Firefox 86 使用 Android 8.0.0，虽然它不受官方支持。如果没有，这值得注意，因为它会证明 MDN 是错误的。