Question

我试图简化代码，但是在这里我向api发出请求，一切正常，直到我尝试在函数4中调用函数5，然后它将api接收的数据放入function2。

有没有人知道如何阻止这种情况发生？

var xhr = new XMLHttpRequest();
var counter = 0;

window.onload = function() {
    var add_button = document.getElementById('add_button');
    add_button.addEventListener('click', function1);


var function1 = function() {
    counter++;
    xhr.addEventListener('load', function2);
    var url = 'https://api.example.org/search';
    console.log(url);
    xhr.open("GET", url);
    xhr.send();
};

var function2 = function() {
    var data = JSON.parse(this.response);
    console.log(data);
    function3();
};

var function3 = function() {
    for (var i in searchArray) {
        var Url2 = 'https://api.example.org/search2';
        xhr.open("GET", Url2);
        xhr.addEventListener('load', function4);
        xhr.send();
    };
};

var function4 = function() {
    var data2 = JSON.parse(this.response);
    if (counter === 3) {
        var url3 = 'https://api.example.org/search3';
        xhr.open("GET", url3);
        xhr.addEventListener('load', function5);
        xhr.send();
    };
};

var function5 = function() {
    var data3 = JSON.parse(this.response);
};

Answer 1

您正在重复使用单个XMLHttpRequest对象。别。为每个请求创建一个新请求（请参阅***行）：

var counter = 0;

window.onload = function() {
    var add_button = document.getElementById('add_button');
    add_button.addEventListener('click', function1);


var function1 = function() {
    counter++;
    var xhr = new XMLHttpRequest();                    // ***
    xhr.addEventListener('load', function2);
    var url = 'https://api.example.org/search';
    console.log(url);
    xhr.open("GET", url);
    xhr.send();
};

var function2 = function() {
    var data = JSON.parse(this.response);
    console.log(data);
    function3();
};

var function3 = function() {
    for (var i in searchArray) {
        var Url2 = 'https://api.example.org/search2';
        var xhr = new XMLHttpRequest();                // ***
        xhr.open("GET", Url2);
        xhr.addEventListener('load', function4);
        xhr.send();
    };
};

var function4 = function() {
    var data2 = JSON.parse(this.response);
    if (counter === 3) {
        var url3 = 'https://api.example.org/search3';
        var xhr = new XMLHttpRequest();                // ***
        xhr.open("GET", url3);
        xhr.addEventListener('load', function5);
        xhr.send();
    };
};

var function5 = function() {
    var data3 = JSON.parse(this.response);
};

另请注意，function3会创建多个重叠请求（假设循环是一个循环），所以请注意这一点。

该行

for (var i in searchArray) {

很可疑。您尚未显示searchArray，但如果它确实是数组，则for-in通常不是循环播放它的最佳方式。有关详细信息，请参阅For-each over an array in JavaScript?。

Answer 2

您看到的主要问题来自于尝试重用相同的XHR对象。

此XHR对象已在function1中添加了一个事件侦听器接下来，在function3中添加一个额外的事件监听器然后是function4中的另一个事件监听器。

可能的解决方案：
1.每次使用不同的XHR对象：fn1XHR = new XMLHttpRequest()等。

除此之外，我认为使用Promise可以为您在此处描述的场景提供更好的模式。

Javascript函数没有按正确的顺序调用

2 个答案: