Длина массива Javascript при чтении файла

Question

Я загружаю некоторые файлы с моего сервера через XMLHttpRequest.Затем загруженные файлы должны быть помещены в объект Array, чтобы я мог их обработать.Вот мой код:

var fileList = [];

angular.forEach(images, function(image, key) {

let xhr = new XMLHttpRequest();

xhr.open('GET', '/img/listings/' + image.dir + '/' + image.name, true);
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
xhr.responseType = 'blob';

xhr.send();

xhr.onload = function() {
    if (xhr.status != 200) { // analyze HTTP status of the response
        alert(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found

    } else {
        var blob = new File([this.response], {type: 'image/png'}); 
        fileList[0] = blob; 
    }

};

console.log(fileList);
console.log(fileList.length);

Результат журнала консоли:

[]
0: File {name: "[object Object]", lastModified: 1569449982337, lastModifiedDate: Wed Sep 25 2019 23:19:42 GMT+0100 (British Summer Time), webkitRelativePath: "", size: 77928, …}
length: 1
__proto__: Array(0)

Но длина равна 0. Почему длина равна 0, когда в ней есть содержимое.

Answer 1

Происходит мало мелочей.

Сначала измените этот код:

xhr.onload = function() {
    if (xhr.status != 200) { // analyze HTTP status of the response
        alert(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found

    } else {
        var blob = new File([this.response], {type: 'image/png'}); 
        fileList[0] = blob; 
    }
};
console.log(fileList);
console.log(fileList.length);

на

xhr.onload = function() {
    if (xhr.status != 200) { // analyze HTTP status of the response
        alert(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found

    } else {
        var blob = new File([this.response], {type: 'image/png'}); 
        // You wanted to add to the array.
        // Using fileList[0] will overwrite the 0 element/object
        fileList.push(blob);
    }
   //console.log(fileList);
   console.log(fileList.length);
};

А причина почему?

Размещение console.log вне AJAX не будет работать, так как AJAX будет работать с другим потоком в фоновом режиме, но вызов console.log будет выполняться в основном потоке.См. Как я могу получить ответ от асинхронного вызова? для более подробной информации.

Другая вещь, которую вы делаете, это перезаписывает ваш элемент индекса 0fileList с fileList[0] = blob;.Вам нужно будет изменить это значение на fileList.push(blob);, чтобы добавить объект в массив.

Answer 2

Это потому, что ваш console.log происходит не в тот момент, когда вы фактически добавляете BLOB-объект в свой массив.

Я имею в виду, что console.log(fileList) получает ссылку на массив, что означает егопокажет текущее значение массива.Таким образом, значение указывается после того, как вы получили файл.

Однако console.log(fileList.length) получает длину массива до того, как вы закончите получение файла.Это не текущее значение, а значение на момент console.log.Я считаю, что это потому, что Number передается по значению, а не по ссылке.

Редактировать:

Например, если вы log свою длину после этой строки: fileList[0] = blob; этопокажет текущую длину.