Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 20.03.2019, 18:08
Новичок на форуме
Отправить личное сообщение для Atari Посмотреть профиль Найти все сообщения от Atari
 
Регистрация: 20.03.2019
Сообщений: 1

Как переписать это на async\await + promise?
Как переписать это на async\await + promise? Проблема в том, что при выходе из функции ещё ни разу не срабатывает событие onload и всегда возвращается пустой массив files, просто не успевают отработать асинхронные методы:

function getFilesFromGalery() {
  var files = [];
  for (let i = 0; i < document.getElementById('gallery').childNodes.length; i++) {
    var xhr = new XMLHttpRequest();
    var imgUrl = document.getElementById('gallery').childNodes[i].src;
    xhr.responseType = 'blob';
    xhr.open('GET', imgUrl);
    xhr.onload = function(e) {
      if (this.status == 200) {
        var myBlob = this.response;
        var filename = 'file_'+ i + '.' + GetFileName(imgUrl);
        var file = new File([myBlob], filename, {type: 'image/' + GetDataType(imgUrl)});
        files.push(file)
      }
    };
    xhr.send();
  }
  return files;
}


А мне в результате нужен именно массив файлов =( Да я знаю, что можно обработать каждый файл отдельно прям в onload, но это мне не подходит. Помогите пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 20.03.2019, 20:18
Аспирант
Отправить личное сообщение для NeoN Посмотреть профиль Найти все сообщения от NeoN
 
Регистрация: 01.03.2013
Сообщений: 77

примерно так.
function getFilesFromGalery() {
	return new Promise(resolve=>{
		var files = [];
		var _i = 0, length = document.getElementById('gallery').childNodes.length;
		var request = i=>{
			var xhr = new XMLHttpRequest();
			var imgUrl = document.getElementById('gallery').childNodes[i].src;
			xhr.responseType = 'blob';
			xhr.open('GET', imgUrl);
			xhr.onload = function(e) {
			  if (this.status == 200) {
				var myBlob = this.response;
				var filename = 'file_'+ i + '.' + GetFileName(imgUrl);
				var file = new File([myBlob], filename, {type: 'image/' + GetDataType(imgUrl)});
				files.push(file)
				if (_i<length) return request(_i++);
				resolve(files):
			  }
			};
			xhr.send();
		};
		request(_i++);
	});
}
Ответить с цитированием
  #3 (permalink)  
Старый 21.03.2019, 02:24
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

У вас отпечатка в имени функции 😆

async function* getGalleryFiles() {
	var i = 0;

	for(const { src } of document.getElementById("gallery").children) {
		const response = await fetch(src);
		const blob = await response.blob();
		const file = new File(
			[blob],
			`file_${i}.${GetFileName(src)}`,
			{ type: `image/${GetDataType(src)}` }
		);

		yield file;

		i++;
	}
}


Работает так (например, вывод в консоль)

for await(const file of getGalleryFiles()) {
	console.log(file);
}


UPD Ещё childNodes заменил на children, вам нужны только HTML элементы, а не тексты, комментарии! 💯

Последний раз редактировалось Malleys, 21.03.2019 в 09:17.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Развитие стандарта HTML Paguo-86PK Элементы интерфейса 104 14.12.2015 21:58
В callback функции теряется контекст. Как это обойти? xintrea AJAX и COMET 4 02.06.2013 11:40
БД, JS и PHP или как всё это сложить lazerru Общие вопросы Javascript 2 15.04.2013 17:20
Как бы Вы это верстали? madd1 (X)HTML/CSS 19 03.08.2012 00:13
form, onclick, function...как это все сплести воедино? Berowz Общие вопросы Javascript 0 04.03.2012 15:06