JavaScriptにおける非同期コードのプロミス化

PromiseがJavaScriptに導入されたのは比較的最近であるため、一部の非同期機能はPromiseをサポートしていない場合があります。そのような場合、Promiseを使用する方がはるかに便利なので、そのようなコードをPromiseのラッパーで包むと有用です。このような変換をプロミス化と呼びます。

Promiseをサポートしていない機能の例として、以前のレッスンで既に取り上げた画像の読み込みが挙げられます:

let image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	console.log('画像の読み込みエラー');
});

このコードをプロミス化し、 Promiseを返す関数で包んでみましょう:

function loadImage(path) {
	return new Promise(function(resolve, reject) {
		let image = document.createElement('img');
		image.src = path;
		
		image.addEventListener('load', function() {
			resolve(image);
		});
		image.addEventListener('error', function() {
			reject(new Error('画像 "' + path + '" の読み込みエラー'));
		});
	});
}

私たちの関数は以下のように使用できます:

loadImage('img.png').then(function(image) {
	document.body.appendChild(image);
}).catch(function(error) {
	console.log(error);
});

私のコードを見ずに、画像読み込みのプロミス化を自分で実行してください。得られたコードをテストしてください。

画像へのパスが配列に格納されているとします:

let paths = ['img1.png', 'img2.png', 'img3.png'];

すべての画像の読み込みが完了するのを待ち、その後ループでbodyの末尾に追加するコードを書いてください。

次のコードが与えられています:

window.addEventListener('DOMContentLoaded', function() {
	console.log('DOMが読み込まれました');
});

これをプロミス化してください。