ES6中异步对象Promise用法详解
本文实例讲述了ES6中异步对象Promise用法。分享给大家供大家参考，具体如下：
回忆一下ES5中的怎么使用异步方法
//es5中的异步回调
letajax=function(callback){
console.log('执行')//执行
setTimeout(()=>{
callback&&callback.call();
},1000)
};
ajax(function(){
console.log('hello')//1s后打印hello
});
使用ES6的Promise的方法：
letajax=function(){
console.log('执行2');//执行2
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
resolve()//执行下一步操作，reject//中断当前的操作
},5000)
})
}
ajax().then(()=>{
console.log('promise','timeout2')//5s后打印promisetimeout2
})
连续使用Promise对象：
letajax=function(){
console.log('执行3');
returnnewPromise((resolve,reject)=>{
setTimeout(()=>{
resolve();
},5000)
})
}
ajax().then(function(){
returnnewPromise(function(resolve,reject){
setTimeout(()=>{
resolve()
},2000)
})
}).then(function(){
console.log('timeouk3')//7s后打印timeouk3
})
Promise捕获错误的catch()
//catch捕获错误
letajax=function(num){
console.log('执行4');
returnnewPromise(function(resolve,reject){
if(num>=5){
resolve();
}else{
thrownewError('传入的数字比5小')
}
})
}
ajax(4).then(function(){
console.log('log',4);
}).catch(function(err){
console.log('catch',err);//catchError:传入的数字比5小
})
Promise的两种高级用法
1.Promise.all()
functionloadImg(src){
returnnewPromise((resolve,reject)=>{
letimg=document.createElement('img');
img.src=src;
img.onload=function(){
resolve(img);
}
img.onerror=function(err){
reject(err);
}
})
}
//对所有的图片进行遍历
functionshowImgs(imgs){
console.log(imgs);
imgs.forEach(function(img){
document.body.appendChild(img);
})
}
//promise.all()的用法
Promise.all([
loadImg('http://yanshi.sucaihuo.com/modals/0/23/small.jpg'),
loadImg('http://yanshi.sucaihuo.com/modals/0/20/small.jpg'),
loadImg('http://yanshi.sucaihuo.com/modals/0/2/small.jpg')
]).then(showImgs)
/**解析:
把多个promise实例当做一个promise实例，当所有的promise实例发生变化后
新的promise实例才会发生变化
*/
2.Promise.race()
//Promise先加载有一个图片加载完就先添加到页面
functionloadImg(src){
returnnewPromise((resolve,reject)=>{
letimg=document.createElement('img');
img.src=src;
img.onload=function(){
resolve(img);
}
img.onerror=function(err){
reject(err);
}
})
}
functionshowImgs(img){
letp=document.createElement('p');
p.appendChild(img);
document.body.appendChild(p);
}
//promise.race()的用法只要有一个网速好的加载完，其他的就不加载了
Promise.race([
loadImg('http://yanshi.sucaihuo.com/modals/0/23/small.jpg'),
loadImg('http://yanshi.sucaihuo.com/modals/0/20/small.jpg'),
loadImg('http://yanshi.sucaihuo.com/modals/0/2/small.jpg')
]).then(showImgs)
}
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。