Question

我有for循环的xhr，它非常罕见

for(var i = 0; i < this.files.length; i++) {
    var xhr = new XMLHttpRequest();

    xhr.upload.onprogress = function(e) {

    };

    xhr.onreadystatechange = function(e) {
        if(this.readyState === 4) {
            console.log(xhr.responseText);
        }
    };
    var formdata = new FormData();
    formdata.append("files", this.files[i]);
    console.log(this.files[i]);
    xhr.open('POST', 'slike.php');
    xhr.send(formdata);
}

我称之为slike.php。并且它工作得很好，但是在responseText上，它不好，有时只从循环中获取最后一个文件，有时会获得两个文件（具有相同的文本）。我不知道怎么解决这个问题，我到处寻找，找不到答案。

Answer 1

默认情况下，XHR是异步的，因此除非另外指定（XHR open()方法中的async = false），否则在第一个XHR初始化之前，您的循环可能已完成。

但是，循环中代码中的i（this.files[i]）引用了循环的i，因此i可能会被分配this.files.length-1当第一个XHR开始时。 Taht是你总是得到最后一个文件的原因。

这就是为什么你必须创建所谓的闭包来确保你使用的索引是你真正想要使用的索引。

试试这个：

for (var i = 0; i < this.files.length; i++) {
    (function(index, files) { // In this closure : parameters of a function in JS 
                              // are available only in the function,
                              // and cannot be changed from outside of it
        var xhr = new XMLHttpRequest(); // variables declared in a function in JS
                                        // are available only inside the function
                                        // and cannot be changed from outside of it

        xhr.upload.onprogress = function (e) {

        };

        xhr.onreadystatechange = function (e) {
            if (this.readyState === 4) {
                console.log(xhr.responseText);
            }
        };
        var formdata = new FormData();
        formdata.append("files", files[index]); // `index` has nothing to do with `i`, now:
                                                // if `i` changes outside of the function,
                                                //`index` will not
        console.log(files[index]); // Don't keep `console.log()` in production code ;-)
        xhr.open('POST', 'slike.php');
        xhr.send(formdata);
    })(i, this.files)
}

或者如果想要按顺序获取文件：

var i = 0,
    fileNb = this.files.length;

function getNextFile(file) {
    var xhr = new XMLHttpRequest();

    xhr.upload.onprogress = function (e) {

    };

    xhr.onreadystatechange = function (e) {
        if (this.readyState === 4) {
            console.log(xhr.responseText);
            if (++i < fileNb) getNextFile(this.files[i]);
        }
    };
    var formdata = new FormData();
    formdata.append("files", file);
    console.log(file); // Don't keep `console.log()` in production code ;-)
    xhr.open('POST', 'slike.php');
    xhr.send(formdata);
}
getNextFile(i);

Answer 2

console.log(xhr.responseText);

您正在访问xhr的当前值（通常是创建的最后一个），而不是附加事件处理程序的对象。

使用this代替xhr，就像您在上一行中所做的那样。

xhr响应，for循环不起作用

2 个答案: