javascript - 从同一异步函数加载数据，多次调用而无需 promise

Question

我有一个如下所示的异步函数(它从 url 获取数据并加载到 html 元素中)

function gethtml(URL, elementID) {      
  if (window.XMLHttpRequest) {      
    xmlhttp=new XMLHttpRequest();
  } else {  
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   }
  xmlhttp.open("GET",URL,true);   
  xmlhttp.send();       
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {         
    document.getElementById(elementID).innerHTML = xmlhttp.responseText;            
    }
  }   
}

我需要多次调用上面的函数来将数据加载到多个 html 元素中。例如:

gethtml(URL1, 'element1');
gethtml(URL2, 'element2');
gethtml(URL3, 'element3');

我尝试过，但是它只加载最后一个 URL3 数据。我认为每次调用异步函数时数据都会被覆盖。
如何通过多次调用从同一个异步函数加载数据？

Answer 1

问题是你只有一个变量xmlhttp，它被声明为全局变量。每次调用该函数时，您都可以通过调用 new XMLHttpRequest() 来覆盖它。它创建一个新对象，并指定回调，但随后立即通过创建一个新对象来销毁该引用。

修复方法是为每个请求保留一个本地 XMLHttpRequest 对象。

function gethtml(URL, elementID){
  // using the 'var' keyword makes these variables local in scope -
  // only accessible from this function
  if (window.XMLHttpRequest) {      
    var xmlhttp=new XMLHttpRequest();
  } else {  
    var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   
  }

  // ... 
}

使用 var 关键字，它应该按预期工作。