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 相关文章推荐
查看源码的工具 学习jQuery源码不错的工具
Dec 26 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
Apr 26 Javascript
jQuery事件绑定on()与弹窗实现代码
Apr 28 Javascript
jQuery实用小技巧_输入框文字获取和失去焦点的简单实例
Aug 25 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
Feb 20 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
详解javascript replace高级用法
Feb 17 Javascript
vue element实现表格合并行数据
Nov 30 Vue.js
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
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
PHP的serialize序列化数据以及JSON格式化数据分析
2015/10/10 PHP
总结PHP中数值计算的注意事项
2016/08/14 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
tp5.1框架数据库子查询操作实例分析
2020/05/26 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
jQuery 获取URL的GET参数值的小例子
2013/04/18 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
简单解析JavaScript中的__proto__属性
2016/05/10 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
ant design实现圈选功能
2019/12/17 Javascript
原生JS利用transform实现banner的无限滚动示例代码
2020/06/15 Javascript
python中的__slots__使用示例
2015/02/26 Python
在Python的Django框架中包装视图函数
2015/07/20 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
opencv实现图片模糊和锐化操作
2018/11/19 Python
python批量获取html内body内容的实例
2019/01/02 Python
python函数的作用域及关键字详解
2019/08/20 Python
python爬虫筛选工作实例讲解
2020/11/23 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
如何保障Web服务器安全
2014/05/05 面试题
村长贪污检举信
2014/04/04 职场文书
工伤赔偿协议书范本
2014/04/15 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
详解java如何集成swagger组件
2021/06/21 Java/Android
Python实现位图分割的效果
2021/11/20 Python