javascript - 多个 Web Worker ajax 请求但并非全部返回

Question

我在 web worker 中有以下代码:

self.addEventListener('message', function(e){ 
        try {
      var xhr=new XMLHttpRequest()

      for(var i = 0; i < e.data.urls.length;i++){
        xhr.open('GET', e.data.urls[i], true);
        xhr.setRequestHeader('Accept', 'application/json');
        xhr.send(null);
        xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                  if (xhr.status == 200 || xhr.status == 304 || xhr.status ==0) {
                    postMessage(xhr.responseText);
                  } else {
                    postMessage(xhr.status + xhr.responseText);
                    throw  xhr.status + xhr.responseText;
                  }
                }
        };
      } 
    } catch (e) {
     postMessage("ERROR:"+e.message);       
   }
}, false);

e.data.urls 包含 16 个在 UI 线程上处理的请求，如下所示:

var replies = 0;

worker.addEventListener('message', function(e){
    replies += 1;
});

只完成了 10 个请求，这是因为 UI 线程在所有请求返回之前已停止，还是我遗漏了什么？

Answer 1

这里发生的是你的 xhr 变量在循环中被覆盖。由于XMLHttpRequest的特性，即默认是异步的，在xhr.send();行执行后不会等待所以for 进入下一个循环，xhr.[...] 行对在上一个循环中设置和触发的 xhr 对象进行操作。根据前一个循环的请求是否已返回(因此状态更改处理程序已执行)或未返回(这是非常不可预测的)，您将覆盖“实时”或“完成”xhr 对象。那些在完成之前被覆盖的会丢失。

你应该确保你没有覆盖。不要对同一个 XMLHttpRequest 对象进行操作，而是为每个请求实例化一个新对象。

我将处理函数的定义移到了循环之外。无需在每个循环中重新定义它。它在分配给它的 XMLHttpRequest 实例的上下文中调用，因此 this 指向该实例。

此外，我交换了 xhr.send() 和 xhr.onreadystatechange = ... 行。应该在发送请求之前分配状态更改事件处理程序(从发送开始就触发了几个事件)，虽然不太可能，但请求甚至可能在添加事件处理程序的行之前以就绪状态 4 返回在代码中执行。

self.addEventListener('message', function(e){ 

    var xhrs = [];

    function handler() {
      if (this.readyState == 4) {
        if (this.status == 200 || this.status == 304 || this.status ==0) {
          postMessage(this.responseText);
        } else {
          postMessage(this.status + this.responseText);
          throw  this.status + this.responseText;
        }
      }
    };

    for(var i = 0; i < e.data.urls.length;i++) {
      xhrs[i] = new XMLHttpRequest();
      xhrs[i].open('GET', e.data.urls[i], true);
      xhrs[i].setRequestHeader('Accept', 'application/json');
      xhrs[i].onreadystatechange = handler;
      xhrs[i].send(null);
    } 

}, false);