Promise解決異步回調的問題
{
//基本定義
let ajax=function(callback){
console.log("執行")
setTimeout(function(){
callback&&callback.call();
},1000)
};
ajax(function(){
console.log("執行完了")
})
//執行
//執行完了
}
{
let ajax=function(){
console.log("執行");
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve();
},1000)
})
}
ajax().then(function(){
console.log("執行完了")
})
//執行
//執行完了
}
{
let ajax=function(){
console.log("執行");
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve();
},1000)
})
}
ajax().then(function(){
return new Promise(function(resolve,reject){
setTimeout(function(){
resolve();
},2000)
})
}).then(function(){
console.log("執行完了")
})
//執行
//執行完了
}
{
let ajax=function(num){
console.log("執行");
return new Promise(function(resolve,reject){
if(num>5){
resolve()
}else {
throw new Error("出錯了")
}
})
}
ajax(6).then(function(){
console.log(6)
}).catch(function(err){
console.log(err)
})
//6
ajax(4).then(function(){
console.log(6)
}).catch(function(err){
console.log(err)
})
//Error: 出錯了
}
Promise.all和Promise.race
{
//所有圖片加載完再加載頁面
function loadImg(src) {
return new Promise((resolve,reject)=>{
let img=document.createElement('img');
img.src=src;
img.onload=function(){
resolve(img);
}
img.onerror=function(err){
reject(err);
}
})
}
function showImgs(imgs){
imgs.forEach(function(img){
document.body.appendChild(img)
})
}
Promise.all([
loadImg('http://img2.imgtn.bdimg.com/it/u=4155809725,2453290283&fm=27&gp=0.jpg'),
loadImg('http://img2.niutuku.com/desk/1208/1446/ntk-1446-13755.jpg'),
loadImg('http://img0.imgtn.bdimg.com/it/u=4273540577,2947670665&fm=214&gp=0.jpg')
]).then(showImgs)
}
{
//一個圖片加載完就好
function loadImg(src) {
return new Promise((resolve,reject)=>{
let img=document.createElement('img');
img.src=src;
img.onload=function(){
resolve(img);
}
img.onerror=function(err){
reject(err);
}
})
}
function showImgs(img){
document.body.appendChild(img)
}
Promise.race([
loadImg('http://img2.imgtn.bdimg.com/it/u=4155809725,2453290283&fm=27&gp=0.jpg'),
loadImg('http://img2.niutuku.com/desk/1208/1446/ntk-1446-13755.jpg'),
loadImg('http://img0.imgtn.bdimg.com/it/u=4273540577,2947670665&fm=214&gp=0.jpg')
]).then(showImgs)
}
最后編輯于 :
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。