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

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

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

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

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

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

javascriptfunction 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 + '" の読み込みエラー'));
    });
  });
}

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

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

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

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