• XMLHttpRequest est bien une API asynchrone, mais elle repose sur le recours à des callbacks. Or ECMAScript 2015 a introduit les promesses pour faciliter la programmation asynchrone en échappant au "callback hell", mais XMLHttpRequest n'en tient pas compte.
• Du fait de Same-Origin Policy (SOP), XMLHttpRequest ne permet pas de récupérer une ressource dont l'origine est différente de celle de la page. Or SOP a été tempérée en introduisant Cross-Origin Resource Sharing (CORS), mais XMLHttpRequest n'en tient pas compte.

La configuration requise

LoadModule ratelimit_module modules/mod_ratelimit.so

Listen 81
<VirtualHost localhost:81>
    DocumentRoot "C:\www"
	<Directory "C:\www\files">
		SetOutputFilter RATE_LIMIT
		SetEnv rate-limit 20
	</Directory>
</VirtualHost>

L'interface graphique

• un bouton pour lancer les téléchargements simultanés ;
• une grille dont chaque ligne comprend le nom du fichier et une barre de progression assortie d'un pourcentage et de la quantité de données téléchargées / à télécharger ;
• des <img> pour afficher les images une fois qu'elles sont toutes téléchargées.

<div id="_files" style="display:inline-grid;grid-template-columns:auto auto;gap:5px"></div>
	<!-- Répété pour chaque fichier -->
	<div>Fichier machin</div>
	<div style="display: inline-grid; grid-template-columns: auto auto">
		<div style="background-color: red; text-align: center; width: 36px">9%</div>
		<div>10543 / 116555</div>
	</div>
</div>

function loadFiles (...files) {
	let tagFiles, tagProgress, tagName, tagBar, tagSize, file, tag, filesLoader;

	tagFiles = document.getElementById ("_files"),
	filesGrid = new Array ();
	tagFiles.innerHTML = "";
	for (file of files) {
		tagName = document.createElement ("div");
		tagName.innerHTML = file;
		tagFiles.appendChild (tagName);
		tagProgress = document.createElement ("div");
		tagProgress.style.display = "inline-grid";
		tagProgress.style.gridTemplateColumns = "auto auto";
		tagFiles.append (tagProgress);
		tagBar = document.createElement ("div");
		tagBar.style.backgroundColor = "red";
		tagBar.style.textAlign = "center";
		tagProgress.append (tagBar);
		tagSize = document.createElement ("div");
		tagProgress.appendChild (tagSize);
		filesGrid.push ({
			name: file,
			tags: {
				name: tagName,
				bar: tagBar,
				size: tagSize
			}
		});
	}
	filesLoader = new FilesLoader (showProgress);
	filesLoader.load (...files);
}

• au début, la syntaxe rest ...files permet de regrouper tous ces paramètres dans un tableau files ;
• à la fin, la syntaxe spread permet de faire exactement l'inverse, c'est-à-dire éclater le tableau pour passer chacun de ses éléments via un paramètre particulier à filesLoader.load ().

{
	name: "",	// Chemin d'accès au fichier
	tags: {
		name: null,		// <div> contenant le chemin au fichier
		bar: null,		// <div> représentant la barre de progression
		size: null		// <div> contenant le nombre octets reçus / la taille du fichier
	}
}

function showProgress (files) {
	let file, f, allFetched, tag, blob, url;

	allFetched = true;
	for (file of files) {
		for (f of filesGrid) {
			if (f.name === file.name) {
				f.tags.bar.style.width = `${Math.round (400 * file.fetched / file.size)}px`;
				f.tags.size.innerHTML = `${file.fetched} / ${file.size}`;
				f.tags.bar.innerHTML = `${Math.round (100 * file.fetched / file.size)}%`;
				break;
			}
		}
		if (!file.data)
			allFetched = false;
	}
	if (allFetched) {
		console.log ("Files loaded!");
		for (file of files) {
			blob = new Blob ([file.data], { type: "application/octet-binary" });
			url = URL.createObjectURL (blob);
			tag = document.createElement ("img");
			tag.src = url;
			document.getElementById ("_gallery").appendChild (tag);
		}
	}
}

{
	name: "",		// Chemin d'accès au fichier
	size: 0,		// Taille du fichier
	fetched: 0,		// Nombre d'octets du fichier déjà téléchargés
	data: null		// Uint8Array contenant les données du fichier, une fois son téléchargement terminé
}

tag.src = `data:img/jpeg;base64,${bota (file.data)}`;

let foo = new Uint8Array ([5, 145 , 161]);
console.log (bota (foo));	// Affiche "NSwxNDUsMTYx"

L'API

function FilesLoader (showProgress) {
	this.showProgress = showProgress;
	this.files = null;
}

FilesLoader.prototype.load = function (...files) {
	return (new Promise ((resolve, reject) => {
		this.files = new Array ();
		for (let fileName of files) {	// let et non var pour la closure !
			let file = { name: fileName, size: 0, fetched: 0, data: null };
			this.files.push (file);
			request = { object: null, done: false };
			fetch (fileName, {cache: "no-store" }).then (response => {
				let reader, chunks;
				file.size = Number.parseInt (response.headers.get ("Content-Length"));	// Closure sur file
				reader = response.body.getReader ();
				chunks = new Array ();
				this.readChunk (file, reader, chunks).then (result => {		// Closure sur this (fonction fléchée !)
					let offset, chunk;
					file.data = new Uint8Array (file.size);		// Closure sur file
					offset = 0;
					for (chunk of chunks) {		// Closure sur chunks
						file.data.set (chunk, offset);	// Closure sur file
						offset += chunk.length;
					}
					this.showProgress (this.files);		// Closure sur this (fonction fléchée !)
				});
			});
		}
	}));
};

• { done: false, value: chunk } si un chunk a été lu ;
• { done: true, value: null } s'il n'y a plus de chunk à lire.

let sent = "Hello";
let index = 0;

function readChar () {
	return (new Promise ((resolve, reject) => {
		setTimeout (() => {
			let result;
			if (index === sent.length)
				result = { done: true, value: null };
			else {
				result = { done: false, value: sent[index] };
				index ++;
			}
			console.log (`READCHAR: { done: ${result.done}, value: ${result.value} }`);
			resolve (result);
		},
		1000);
	}));
}

let received = "";

readChar ().then (result => {
	if (!result.done) {
		received += result.value;
		readChar ().then (result => {
			if (!result.done) {
				received += result.value;
				readChar ().then (result => {
					// Ainsi de suite jusqu'au dernier caractère
					console.log (`RESULT: ${received}`);
				});
			}
		});
	}
});

let received = "";

function readNextChar (result) {
	received += result.value;
	return (readChar ());
}
readChar ().then (readNextChar).then (readNextChar).../* Ainsi de suite jusqu'au dernier caractère */...then (() => console.log (`RESULT: ${received}`));

let received = "";

function readString () {
	return (new Promise ((resolve, reject) => {
		readChar ().then (result => {
			if (result.done) {
				resolve ();
				return;
			}
			received += result.value;
			readString ().then (resolve);
		});
	}));
}
readString ().then (() => console.log (`RESULT: ${received}`));
console.log ("Preuve que l'appel précédent est asynchrone, ce message est affiché en premier");

• si le résultat indique un nouveau caractère, le fulfiller l'ajoutera à la liste des caractères déjà lus, puis appelera de nouveau readString () et associera à la nouvelle P_readString retournée un fulfiller qui n'est autre que le resolver de la P_readString courante ;
• si le résultat indique qu'il n'y a plus de caractère, le fulfiller se contentera d'appeler ce resolver et de rendre la main, mettant un terme à la série d'appels récursifs à readString ().

function readString () {
	let n = index;
	return (new Promise ((resolve, reject) => {
		readChar ().then (result => {
			if (result.done) {
				resolve ();
				return;
			}
			received += result.value;
			readString ().then (() => {
				console.log (`${n} resolved`);	// Closure sur n
				resolve ();
			});
		});
	}));
}

let index = 0;
function readChar (callback) {
	setTimeout (() => {
		let result;
		if (index === sent.length)
			result = { done: true, value: null };
		else {
			result = { done: false, value: sent[index] };
			index ++;
		}
		console.log (`READ: { done: ${result.done}, value: ${result.value} }`);
		callback (result);
	}, 1000);
}

let received = "";
function readString (callback) {
	readChar (result => {
		if (result.done) {
			callback ();
			return;
		}
		received += result.value;
		readString (callback);
	});
}
readString (() => console.log (`RESULT: ${received}`));
console.log ("Preuve que l'appel précédent est asynchrone, ce message est affiché en premier");

• le recours à des closures ;
• la gestion du cache ;
• l'assemblage des chunks.

for (var i = 0; i != 10; i ++)
	setTimeout (() => console.log (i), i * 1000);

for (let i = 0; i != 10; i ++)
	setTimeout (() => console.log (i), i * 1000);

FilesLoader.prototype.readChunk = function (file, reader, chunks) {
	return (new Promise ((resolve, reject) => {
		reader.read ().then (result => {
			if (result.done) {
				resolve ();
				return;
			}
			chunks.push (result.value);
			file.fetched += result.value.length;
			this.showProgress (this.files);
			this.readChunk (file, reader, chunks).then (resolve);
		})
	}));
};

Le programme principal

let filesGrid = null;

function run () {
	loadFiles ("./files/test0.jpg", "./files/test1.jpg", "./files/test2.jpg");
}

Conclusion