Javascript xmlhttprequests在控制台中工作，但不在脚本中工作

我有一个问题，需要检索XML文件的内容，然后将其填充到下拉框中。这应该很容易，但是到这个XML文件的链接在正常情况下会发生变化

我的解决方法是获取下载xml文件的页面，找到链接，然后使用该链接获取xml文件。这将需要2个Http请求

我的代码是：

var data = null;
var Doc = new Document();
var element;
var link = "";
var xmlDoc;
var xhr = new XMLHttpRequest();

xhr.addEventListener("readystatechange", function() {
    if(this.readyState === 4 && link === "") {  //if we havent gotten the link yet, get it
        Doc = this.response; //get the HTML document where the link is
        element = Doc.getElementsByClassName("failoverLink")[0];  //get the element with the link
        link = element.href; //get the link
        console.log(link); // IMPORTANT: when running the script, this actually returns the link in this context
    }
    else
    {
        if(this.readyState === 4) //now get the actual XML Document
        {
            xmlDoc = this.responseXML; //get the document
            var txt = "<option></option>"; //construct the dropdown box
            var i;
            var x = xmlDoc.getElementsByTagName("Region"); //get all elements that we need for the dropdown
            for(i=0; i<x.length; i++) {
                txt += "<option>" + x[i].attributes.Name.value + "</option>";
            }
            document.getElementById("dropdown").innerHTML = txt; //insert it into the page
        }
    }
});

xhr.open("GET", "https://cors-anywhere.herokuapp.com/<link 1 of the parent document> replaced for privacy purposes");
xhr.responseType = "document";
xhr.send(data);
xhr.abort();

var newlink = "https://cors-anywhere.herokuapp.com/" + link;
xhr.open("GET", newlink);
xhr.responseType = "document";
xhr.overrideMimeType('text/xml');
xhr.send(data);
xhr.abort();

var数据=null；
var Doc=新文档（）；
var元素；
var link=“”；
var-xmlDoc；
var xhr=new XMLHttpRequest（）；
addEventListener（“readystatechange”，function（））{
如果（this.readyState===4&&link===”）{//如果我们还没有得到链接，就得到它
Doc=this.response；//获取链接所在的HTML文档
element=Doc.getElementsByClassName（“failoverLink”）[0]；//获取带有链接的元素
link=element.href；//获取链接
console.log（link）；//重要提示：在运行脚本时，这实际上会返回此上下文中的链接
}
其他的
{
if（this.readyState==4）//现在获取实际的XML文档
{
xmlDoc=this.responseXML；//获取文档
var txt=”“；//构建下拉框
var i；
var x=xmlDoc.getElementsByTagName（“Region”）；//获取下拉列表所需的所有元素
对于（i=0；i），我最终解决了自己的问题。问题是，事件侦听器在第二次调用之前第一次没有完成。下面是我所做的修复

xhr1.addEventListener("readystatechange", function() {
    if(xhr1.readyState === 4) {
        Doc = xhr1.response;
        element = Doc.getElementsByClassName("failoverLink")[0];
        link = element.href;
        console.log(link);

        xhr2.addEventListener("readystatechange", function() {
            if(this.readyState === 4)
            {
                xmlDoc = this.responseXML;
                var txt = "<option></option>";
                var i;
                var x = xmlDoc.getElementsByTagName("Region");
                for(i=0; i<x.length; i++) {
                    txt += "<option>" + x[i].attributes.Name.value + "</option>";
                }
                document.getElementById("dropdown").innerHTML = txt;
            }
        });

        var newlink = "https://cors-anywhere.herokuapp.com/" + link;
        xhr2.open("GET", newlink);
        xhr2.responseType = "document";
        xhr2.overrideMimeType('text/xml');
        xhr2.send(data);
    }
});

xhr1.addEventListener（“readystatechange”，function（））{
如果（xhr1.readyState==4）{
Doc=xhr1.0响应；
元素=Doc.getElementsByClassName（“failoverLink”）[0]；
link=element.href；
控制台日志（链接）；
addEventListener（“readystatechange”，function（））{
if（this.readyState==4）
{
xmlDoc=this.responseXML；
var txt=“”；
var i；
var x=xmlDoc.getElementsByTagName（“区域”）；
对于（i=0；i您对两个不同的请求使用相同的XMLHttpRequest。这是错误的吗？上次我检查这是最佳实践。在我更改代码并尝试此操作之前，我使用了两个不同的XMLHttpRequest对象。我仍然遇到相同的问题。为什么要调用
xhr.abort（）
？？我第一次调用它，因此它在尝试连接第二个连接之前会关闭连接。第二次调用它是为了一致性。但是您正在在调用完成之前中止它。