学习笔记：ES6之Promise

来源：互联网发布：淘宝怎么更改支付宝编辑：程序博客网时间：2024/05/28 17:08

（1）Promise是异步操作的一种解决方案

（2）什么是异步？

先执行什么，后执行什么

（3）Promise的作用

（4）Promise的基本用法

//基本定义的调用
letajax=function(callback){
console.log('执行');
setTimeout(function(){
callback&&callback.call();
},1000);
};
ajax(function(){
console.log('timeout1');
})
//Promise的调用--一次调用
letajax=function(){
console.log('执行');
Return newPromise(function(resolve,reject){
setTimeout(function(){
resolve();//
},1000);
})
};
ajax().then(function(){
console.log('promise','timeout2');
})
//Promise的调用--连续调用
letajax=function(){
console.log('执行3-1');
Return newPromise(function(resolve,reject){
setTimeout(function(){
resolve();
},1000);
})
};
ajax()
.then(function(){
return newPromise(function(resolve,reject){
console.log('执行3-2');
setTimeout(function(){
resolve();
},2000);
})
})
.then(function(){
console.log('promise','执行3-3');
})

//捕获异常错误
letajax=function(num){
console.log('执行4');
return newPromise(function(resolve,reject){
if(num>5){
resolve();
}else{
throw newError('出错了');
}
})
};
ajax(6).then(function(){
console.log('log',6);
}).catch(function(err){
console.log('catch',err);
});
ajax(3).then(function(){
console.log('log',3);
}).catch(function(err){
console.log('catch',err);//捕获到错误
})

//所有图片加载完再加载页面

//加载图片
functionloadImg(src){
return newPromise((resolve,reject)=>{
letimg=document.createElement('img');
img.src=src;
//图片加载成功
img.onload=function(){
resolve();
};
//图片加载失败
img.onerror=function(){
reject(err);
}
})
}
//将图片加载到页面上
functionshowImgs(imgs){
imgs.forEach(function(img){
document.body.appendChild(img);
})
}
Promise.all([
loadImg('图片地址'),
loadImg('图片地址'),
loadImg('图片地址')
]).then(showImgs)

Promise.all（）：只有在all（）里面的内容发生改变的时候且全部加载完成，就会触发Promise.all（）这个实例

Promise.race（）:只要race（）里面的内容有一个加载完成，就可以触发Promise.race（）实例

//只要有一张图片加载完就加载页面

//加载图片

functionloadImg(src){
return newPromise((resolve,reject)=>{
letimg=document.createElement('img');
img.src=src;
//图片加载成功
img.onload=function(){
resolve();
};
//图片加载失败
img.onerror=function(){
reject(err);
}
})
}
functionshowImgs(imgs){
imgs.forEach(function(img){
letp=document.createElement('p');
p.appendChild(img);
document.body.appendChild(p);
})
}
Promise.race([
loadImg('图片地址'),
loadImg('图片地址'),
loadImg('图片地址')
]).then(showImgs);

阅读全文

0 0