将承诺结果添加到数组中的项目

Question

我一直在尝试做的是将文件及其匹配的 dataurl 添加到数组中的对象中。

文件是一个FileList 对象。

我首先在Filereader 的onloadend 事件中尝试了这个，但在读取过程中无法访问原始文件，因此转向了承诺。

var data = [];
for(var i = 0; i < files.length; i++){
   data.push({
        file: files[i],   //keep the files for uploading
        src: readFile(files[i]) // generate the src to offer preview image
    });
    var last = data.length -1;
    console.log(last); //log a
    data[last].src.then(function(result){
        console.log(last); // log b
        data[last].src = result // overwrite the src deffered object with the result of the promise
    });
}

readFile 正在返回一个延迟的承诺，假设这是有效的。

当文件的长度为 1 但文件是多个时，这工作正常，我遇到了异步方面的问题并且它只适用于最后一项。

基于 2 个文件的日志结果 (files.length == 2)：

0 //log a
1 //log a
1 //log b <-- ignores 0 stays as 1
1 //log b

期待 0101

Answer 1

这是一个常见问题：JavaScript closure inside loops – simple practical example。

可以通过将索引绑定到回调来解决：

data[last].then(function(index, result){
    data[index].src = result;
}.bind(null, last));