Menggunakan Promise dalam Javascript untuk menyelesaikan pemuatan aynchronous (imej, css, js, dll.)

Kadangkala kita perlu menyelesaikan beberapa operasi selepas memuatkan sumber statik. Menggunakan fungsi panggil balik ialah kaedah biasa, tetapi pendekatan ini mungkin menjana fungsi berbilang panggil balik, menjadikan penyusunan kod lebih kompleks. Jadi kita boleh menggunakan Janji untuk menangani isu ini.

Contoh (memuatkan imej)

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
})

Contoh memuatkan imej berganda

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() menerima pelbagai janji yang hanya menjadi keadaan penuh apabila semua Promise menjadi keadaan penuh

Atas ialah kandungan terperinci Menggunakan Promise dalam Javascript untuk menyelesaikan pemuatan aynchronous (imej, css, js, dll.). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!