[chrome扩展开发] HEAD 请求

1. XMLHttpRequest

chrome.webRequest.onHeadersReceived.addListener(
  function(details){
    console.log(details)
    //return  {cancel: true};
  },
  {urls: ["*://*.jianshu.com/*"]},
  ["responseHeaders","blocking"]
);

let url="https://www.jianshu.com/p/887ff8a66551";
function UrlExists(url, callback)
{
    var http = new XMLHttpRequest();
    http.open('HEAD', url);
    http.onreadystatechange = function() {
        if (this.readyState == this.DONE) {
            callback(this.status != 404);
        }
    };
    http.send();
}
UrlExists(url,(response)=>{console.log(response)})

使用XMLHttpRequest来进行HEAD请求.
使用onHeadersReceived进行消息捕获.
代码放到background效果如下图

问题一: 存在一个问题就是遇到访问不了的网站时
所需要的时间特别久

chrome.webRequest.onHeadersReceived.addListener(
  function(details){
    console.log(details)
    //return  {cancel: true};
  },
  {urls: ["*://*.jianshu.com/*"]},
  ["responseHeaders","blocking"]
);

let url2="https://www.safecode.cc/";

function UrlExists(url, callback)
{
    var http = new XMLHttpRequest();
    console.log(http);
    http.open('HEAD', url);
    http.onerror = function(event){
      console.log(event);
      let endTime = +new Date();
      console.log("HEAD失败用时共计"+(endTime-beginTime2)+"ms");
    }
    http.onreadystatechange = function() {
        if (this.readyState == 4) {
            callback(this.status);
        }
    };
    http.send();
}
var beginTime2 = +new Date();
UrlExists(url2,(response)=>{
  console.log(response);
  let endTime = +new Date();
  console.log("HEAD成功用时共计"+(endTime-beginTime2)+"ms");
})

能过设置超时时间,能解决这个问题的.

http.timeout = 3;

构造三个请求,1个404,1个200,1个0

2. fetch

chrome.webRequest.onHeadersReceived.addListener(
  function(details){
    console.log(details)
    //return  {cancel: true};
  },
  {urls: ["*://*.jianshu.com/*"]},
  ["responseHeaders","blocking"]
);

let url="https://www.jianshu.com/p/887ff8a66551";
let url1="https://www.jianshu.com/notexists";

var beginTime = +new Date();
fetch(url,{
  method: 'HEAD' 
}).then((response)=>{
  console.log(response);
  let endTime = +new Date();
  console.log("HEAD成功用时共计"+(endTime-beginTime)+"ms");
})
.catch((e)=>{console.log('err:',e)})

var beginTime1 = +new Date();
fetch(url1,{
  method: 'HEAD' 
}).then((response)=>{
  console.log(response);
  let endTime = +new Date();
  console.log("HEAD成功用时共计"+(endTime-beginTime)+"ms");
})
.catch((e)=>{
  console.log('err:',e)
  let endTime = +new Date();
  console.log("HEAD失败用时共计"+(endTime-beginTime)+"ms");
})

同样用3个相同url测试

感觉HEAD请求所消耗的时间更少,另外fetch
能否设置超时间? 不支持

3. 获取ResponseHeader

XMLHttpRequest

var http = new XMLHttpRequest();
http.open('HEAD', 'https://www.baidu.com');
http.onreadystatechange = function(res) {
    if (this.readyState == this.HEADERS_RECEIVED) {
        console.log(this.getAllResponseHeaders());
    }
};
http.send();
//===================
pragma: no-cache
date: Thu, 20 Sep 2018 01:51:07 GMT
content-encoding: gzip
last-modified: Mon, 13 Jun 2016 02:50:08 GMT
server: bfe/1.0.8.18
content-type: text/html
cache-control: private, no-cache, no-store, proxy-revalidate, no-transform
connection: Keep-Alive

fetch

fetch('https://www.baidu.com', {method:'HEAD'}).then(data=>{
    for ( e of   data.headers.entries()) {
        console.log(e);
    }
});
//=========================
VM1201:3 (2) ["cache-control", "private, no-cache, no-store, proxy-revalidate, no-transform"]
VM1201:3 (2) ["connection", "Keep-Alive"]
VM1201:3 (2) ["content-encoding", "gzip"]
VM1201:3 (2) ["content-type", "text/html"]
VM1201:3 (2) ["date", "Thu, 20 Sep 2018 01:51:12 GMT"]
VM1201:3 (2) ["last-modified", "Mon, 13 Jun 2016 02:50:08 GMT"]
VM1201:3 (2) ["pragma", "no-cache"]
VM1201:3 (2) ["server", "bfe/1.0.8.18"]

那什么情况下先用哪种方案?

1. 正常情况下,扩展的操作对象已经明确存在的肯定不会出现timeout的情况,或向自己的服务器请求接口, fetch还是蛮适合
2. 像网络探测, 端口探测,这类就只能用XMLHttpRequest否则够等.

参考:
https://fetch.spec.whatwg.org/#requestinfo