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
Top comments (0)