在没有承诺的情况下多次调用同一个异步函数加载数据

Load data from same async function calling multiple times without promises

本文关键字：同一个 调用 异步 函数 数据 加载 承诺 情况下      更新时间：2023-09-26

我有一个像下面这样的异步函数(从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数据。我认为每次调用异步函数时都会覆盖数据。
如何加载数据从同一异步函数调用多次?

问题是您只有一个变量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关键字，它应该工作如预期的

相关文章：