ES6中异步对象Promise用法详解


Posted in Javascript onJuly 31, 2019

本文实例讲述了ES6中异步对象Promise用法。分享给大家供大家参考,具体如下:

回忆一下ES5中的怎么使用异步方法

// es5中的异步回调
  let ajax = function(callback){
   console.log('执行')  // 执行
   setTimeout(() => {
    callback&&callback.call();
   }, 1000)
  };
  ajax(function(){
   console.log('hello') // 1s后打印hello
  });

使用ES6的Promise的方法:

let ajax = function(){
   console.log('执行2'); // 执行2
   return new Promise((resolve,reject)=>{
    setTimeout(() => {
     resolve() // 执行下一步操作, reject  // 中断当前的操作
    },5000)
   })
}
ajax().then(()=>{
   console.log('promise','timeout2')  // 5s后打印  promise timeout2
})

连续使用Promise对象:

let ajax = function(){
   console.log('执行3');
   return new Promise((resolve,reject)=>{
    setTimeout(() => {
     resolve();
    },5000)
   })
}
ajax().then(function(){
   return new Promise(function(resolve,reject){
    setTimeout(() => {
     resolve()
    }, 2000)
   })
}).then(function(){
   console.log('timeouk3') // 7s后打印timeouk3
})

Promise捕获错误的catch( )

// catch 捕获错误
let ajax = function(num){
   console.log('执行4');
   return new Promise(function(resolve,reject){
    if(num>=5){
     resolve();
    }else{
     throw new Error('传入的数字比5小')
    }
   })
}
ajax(4).then(function(){
   console.log('log',4);
}).catch(function(err){
   console.log('catch',err); // catch Error: 传入的数字比5小
})

Promise的两种高级用法

1.Promise.all( )

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){
   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 先加载 有一个图片加载完就先添加到页面
  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){
   let p = 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.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
css样式标签和js语法属性区别
Nov 06 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
koa源码中promise的解读
Nov 13 Javascript
微信小程序解除10个请求并发限制
Dec 18 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
vue项目首屏加载时间优化实战
Apr 23 Javascript
Node.js API详解之 zlib模块用法分析
May 19 Javascript
JS实现在线ps功能详解
Jul 31 #Javascript
ES6中定义类和对象的方法示例
Jul 31 #Javascript
Vue+Koa2 打包后进行线上部署的教程详解
Jul 31 #Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 #Javascript
vue实现中部导航栏布局功能
Jul 30 #Javascript
js定义类的方法示例【ES5与ES6】
Jul 30 #Javascript
Javascript 对象(object)合并操作实例分析
Jul 30 #Javascript
You might like
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
jQuery实现自定义下拉列表
2015/01/05 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
详解nodejs微信公众号开发——1.接入微信公众号
2017/04/10 NodeJs
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
小程序实现按下录音松开识别语音
2019/11/22 Javascript
Jquery如何使用animation动画效果改变背景色的代码
2020/07/20 jQuery
浅析 Vue 3.0 的组装式 API(一)
2020/08/31 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
2020/12/20 Javascript
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
使用tensorflow实现线性回归
2018/09/08 Python
python使用列表的最佳方案
2020/08/12 Python
python3.7中安装paddleocr及paddlepaddle包的多种方法
2020/11/27 Python
高三自我鉴定
2013/10/23 职场文书
行政专员求职信范文
2014/05/03 职场文书
企业承诺书怎么写
2014/05/24 职场文书
求职信的正确写法
2014/07/10 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
体育部部长竞选稿
2015/11/21 职场文书
银行求职信范文
2019/05/13 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server
Web应用开发TypeScript使用详解
2022/05/25 Javascript