This content originally appeared on DEV Community and was authored by tanjiagang
Sometimes we need to complete some operations after loading static resources. Using callback function is a common method, but this approach may generate multi-callback functions, making the code struction more complex. So we can use Promise to deal with this issue.
Example(loading an 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
})
Example of loading mutiple 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() receives an array of promises that only becomes fullfilled state when all Promise become fullfilled state
This content originally appeared on DEV Community and was authored by tanjiagang
tanjiagang | Sciencx (2024-11-08T01:35:27+00:00) Using Promise in Javascript to solve aynchronous loading(image, css, js, etc.). Retrieved from https://www.scien.cx/2024/11/08/using-promise-in-javascript-to-solve-aynchronous-loadingimage-css-js-etc/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.