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 相关文章推荐
极酷的javascirpt,让你随意编辑任何网页
Feb 25 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
Nov 30 Javascript
javascript完美拖拽的实现方法
Sep 29 Javascript
Node.js模块加载详解
Aug 16 Javascript
JQuery删除DOM节点的方法
Jun 11 Javascript
AngularJS的ng Http Request与response格式转换方法
Nov 07 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
详解Vue串联过滤器的使用场景
Apr 30 Javascript
js根据后缀判断文件文件类型的代码
May 09 Javascript
jQuery实现影院选座订座效果
Apr 13 jQuery
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使用iconv中文截断问题的解决方法
2015/02/11 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
jquery实现ajax提交form表单的方法总结
2014/03/03 Javascript
node.js实现逐行读取文件内容的代码
2014/06/27 Javascript
探讨js字符串数组拼接的性能问题
2014/10/11 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
基于VUE选择上传图片并页面显示(图片可删除)
2017/05/25 Javascript
微信小程序登录换取token的教程
2018/05/31 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
微信小程序如何获取群聊的openGid以及名称详解
2019/07/17 Javascript
[02:34]DOTA2亚洲邀请赛 BG战队出场宣传片
2015/03/09 DOTA
[49:12]完美世界DOTA2联赛PWL S2 Magma vs GXR 第二场 11.29
2020/12/02 DOTA
django解决跨域请求的问题
2018/11/11 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
python 图像平移和旋转的实例
2019/01/10 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
python输出决策树图形的例子
2019/08/09 Python
浅谈keras中loss与val_loss的关系
2020/06/22 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
沙特阿拉伯网上购物:Sayidaty Mall
2018/05/06 全球购物
工程造价与财务管理专业应届生求职信
2013/10/06 职场文书
应届大学生求职信
2013/12/01 职场文书
中层干部岗位职责
2013/12/18 职场文书
人事部主管岗位职责
2013/12/26 职场文书
大学军训通讯稿
2014/01/13 职场文书
高中体育教学反思
2014/01/24 职场文书
质量月活动策划方案
2014/03/10 职场文书
还款承诺书范文
2014/05/20 职场文书
网站推广策划方案
2014/06/04 职场文书
法制教育观后感
2015/06/17 职场文书
JavaScript文档对象模型DOM
2021/11/20 Javascript