Promise實現非同步載入圖片
阿新 • • 發佈:2020-10-11
//函式直接呼叫,在.then中進行成功的操作,在.catch中進行失敗的各種操作.
es6中:
let imageAsync=(url)=>{ return new Promise((resolve,reject)=>{ let img = new Image(); img.src=url; img.οnlοad=()=>{ console.log(`圖片請求成功,此處進行通用操作`); resolve(image); } img.οnerrοr=(err)=>{ console.log(`失敗,此處進行失敗的通用操作`); reject(err); } }) } imageAsync("url").then(()=>{ console.log(`${image},此處進行圖片成功的個性化操作`); }).catch((error)=>{ console.log(`${error},此處進行圖片請求失敗的個性化操作`); })
es5:
function loadImageAsync(url){ return new Promise((resolve,reject)=>{ let image=new Image(); image.onload=function(){ resolve(image); }; image.onerror=function(){ reject(new Error('Could not image at'+url)); } image.src=url; }) }