Verwendung von Promise in Javascript zur Lösung des asynchronen Ladens (Bild, CSS, JS usw.)

Manchmal müssen wir einige Vorgänge abschließen, nachdem wir statische Ressourcen geladen haben. Die Verwendung von Callback-Funktionen ist eine gängige Methode, dieser Ansatz generiert jedoch möglicherweise mehrere Callback-Funktionen, wodurch die Codestruktur komplexer wird. Wir können Promise also verwenden, um dieses Problem zu lösen.

Beispiel (Laden eines Bildes)

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

Beispiel für das Laden mehrerer Bilder

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() empfängt eine Reihe von Versprechen, die nur dann den Status „Erfüllt“ erreichen, wenn alle Versprechen den Status „Erfüllt“ erreichen

Das obige ist der detaillierte Inhalt vonVerwendung von Promise in Javascript zur Lösung des asynchronen Ladens (Bild, CSS, JS usw.). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!