本文实例讲述了ES6中异步对象承诺用法。分享给大家供大家参考,具体如下:
<强>回忆一下ES5中的怎么使用异步方法
//es5中的异步回调
让ajax=函数(回调){
console.log(“执行”)//执行
setTimeout(()=比;{
callback&, callback.call ();
}, 1000)
};
ajax(函数(){
console.log('你好')//1 s后打印你好
}）;
之前
<强>使用ES6的承诺的方法:
让ajax=function () {
console.log(“执行2》);//执行2
返回新的承诺((解决,拒绝)=祝辞{
setTimeout(()=比;{
解决()//执行下一步操作,拒绝//中断当前的操作
},5000)
})
}
ajax()()=祝辞{
console.log(‘承诺’,‘timeout2)//5 s后打印timeout2承诺
})
之前
<>强连续使用承诺对象:
让ajax=function () {
console.log(“执行3 ');
返回新的承诺((解决,拒绝)=祝辞{
setTimeout(()=比;{
解决();
},5000)
})
}
ajax(),然后(函数(){
返回新的承诺(函数(解决,拒绝){
setTimeout(()=比;{
解决()
},2000)
})
})(函数(){
console.log (timeouk3)//7 s后打印timeouk3
})
之前
<强>承诺捕获错误的catch()
//捉捕获错误
让ajax=函数(num) {
console.log(“执行4 ');
返回新的承诺(函数(解决,拒绝){
如果(num>=5) {
解决();
其他}{
把新的错误(“传入的数字比5小)
}
})
}
ajax(4),然后(函数(){
console.log(‘日志’,4);
}).catch(函数(err) {
console.log(“捕捉”,错);//捕获错误:传入的数字比5小
})
之前
<强>承诺的两种高级用法
函数loadImg (src) {
返回新的承诺((解决,拒绝)=祝辞{
让img=document.createElement (img);
img。src=https://www.yisu.com/zixun/src;
img。onload=function () {
解决(img);
}
img。onerror=function (err) {
拒绝(错);
}
})
}//对所有的图片进行遍历
函数showImgs(一){
console.log(一个);
imgs.forEach(函数(img) {
document.body.appendChild (img);
})
}//promise.all()的用法
Promise.all ([
loadImg (“https://cache.yisu.com/upload/information/20200622/114/17461.jpg”),
loadImg (“https://cache.yisu.com/upload/information/20200622/114/17462.jpg”),
loadImg (“https://cache.yisu.com/upload/information/20200622/114/17463.jpg”)
])(showImgs)/* *解析:
把多个承诺实例当做一个承诺实例,当所有的承诺实例发生变化后
新的承诺实例才会发生变化
*/之前
//承诺先加载有一个图片加载完就先添加到页面
函数loadImg (src) {
返回新的承诺((解决,拒绝)=祝辞{
让img=document.createElement (img);
img。src=https://www.yisu.com/zixun/src;
img。onload=function () {
解决(img);
}
img。onerror=function (err) {
拒绝(错);
}
})
}
函数showImgs (img) {
让p=document.createElement (“p”);
p.appendChild (img);
document.body.appendChild (p);
}//promise.race()的用法只要有一个网速好的加载完,其他的就不加载了
Promise.race ([
loadImg (“https://cache.yisu.com/upload/information/20200622/114/17461.jpg”),
loadImg (“https://cache.yisu.com/upload/information/20200622/114/17462.jpg”),
loadImg (“https://cache.yisu.com/upload/information/20200622/114/17463.jpg”)
])(showImgs)
}
之前
感兴趣的朋友可以使用:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题:《JavaScript面向对象入门教程》、《JavaScript错误与调试技巧总结》,《JavaScript数据结构与算法技巧总结》,《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
