JavaScript で Promise を使用して非同期読み込み (画像、CSS、JS など) を解決する

静的リソースをロードした後に、いくつかの操作を完了する必要がある場合があります。コールバック関数を使用するのが一般的な方法ですが、この方法では複数のコールバック関数が生成され、コード構造がより複雑になる可能性があります。したがって、Promise を使用してこの問題に対処できます。

例(画像の読み込み)

function loadImg(imgSrc) {
  return new Promise(function(resolve, reject){
    img.load = () => {
      // asynchronous code here
      resolve()
    }

    img.onError = () => {
      reject()
    }
  })
}


loadImg('src.jpg').then(()=>{
  // operations after loading image here
}).catch(()=>{
 // error handling
})

複数の画像を読み込む例

function loadImg(imgSrc) {
  return new Promise(function(resolve, reject){
    img.load = () => {
      // asynchronous code here
      resolve()
    }

    img.onError = () => {
      reject()
    }
  })
}

const imgList = ['1.jpg', '2.jpg', '3.jpg', '4.jpg']
let imgLoadingPromise = []
for(let img of imgList) imgLoadingPromise.push(loadImg(img))

Promise.all(imgLoadingPromise).then(()=>{
  // operations after loading image here
}).catch(()=>{
 // error handling
})

Promise.all() は、すべての Promise が fullfilled 状態になった場合にのみ fullfilled 状態になる Promise の配列を受け取ります

以上がJavaScript で Promise を使用して非同期読み込み (画像、CSS、JS など) を解決するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。