Utilisation de Promise en Javascript pour résoudre le chargement asynchrone (image, css, js, etc.)

Parfois, nous devons effectuer certaines opérations après le chargement de ressources statiques. L'utilisation de la fonction de rappel est une méthode courante, mais cette approche peut générer des fonctions de rappel multiples, rendant la construction du code plus complexe. Nous pouvons donc utiliser Promise pour résoudre ce problème.

Exemple (chargement d'une image)

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

Exemple de chargement de plusieurs images

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() reçoit un tableau de promesses qui ne deviennent remplies que lorsque toutes les promesses deviennent remplies

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!