Question

我有一个textarea，用户可以在其中输入多个URL，而这些URL将用于API请求。

我遇到的问题是只捕获了最后一个URL API请求（有时多次）。

$('.start').on('click',function()
{
    var url_list = $("#url-list").val();
    var urls = url_list.split("\n");

    for (var i = 0, len = urls.length; i < len; i++) {
        console.log("i is "+i)
        var xhr = new XMLHttpRequest();
        xhr.open('GET', urls[i], true);
        xhr.send();

        xhr.onreadystatechange = processRequest;

        // send API request
        function processRequest() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var response = JSON.parse(xhr.responseText);
                console.log(response);
            }
        }
    }
});

我不确切地知道我做错了什么，我可能对此视而不见或者只是不知道更好。任何帮助，将不胜感激。 PS。提出API请求相当新。

Answer 1

Welcome to closures

这里的问题是：

循环可以在第一个请求开始之前完成，因此它需要数组中的最后一个URL
在回调中，您引用了相同的xhr对象

您可以尝试其中一种不同的解决方案here。

在回调中用xhr替换this是最快的解决方法：

function processRequest() {
  if (this.readyState == 4 && this.status == 200) {
    var response = JSON.parse(this.responseText);
    console.log(response);
  }
}

有关正在运行的示例，请参阅this fiddle。

Answer 2

您可以像这样更新您的代码

var requestIndex = 0;
var urls = [];

$('.start').on('click',function()
{
    // Reset request index
    requestIndex = 0;

    var url_list = $("#url-list").val();
    urls = url_list.split("\n");

    // Send Http request    
    sendRequest(urls, requestIndex);

});

// Send Http request
function sendRequest(urls, index) {

    // Send API request 
    var xhr = new XMLHttpRequest();
    xhr.open('GET', urls[index], true);
    xhr.onreadystatechange = processRequest;
    xhr.send();

}

// Process API request
function processRequest(e) {

    if (e.target.readyState == 4 && e.target.status == 200) {
        var response = JSON.parse(e.target.responseText);
        console.log(response);
    }

    requestIndex++;
    if (requestIndex < urls.length) {
       sendRequest(urls, requestIndex);
    }

}

foreach只发送最后xhr请求

2 个答案: