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 相关文章推荐
JQUBAR1.1 jQuery 柱状图插件发布
Nov 28 Javascript
jquery 插件学习(五)
Aug 06 Javascript
Javascript学习笔记之函数篇(六) : 作用域与命名空间
Nov 23 Javascript
jQuery中not()方法用法实例
Jan 06 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
jQuery实现拖拽可编辑模块功能代码
Jan 12 Javascript
Angularjs的$http异步删除数据详解及实例
Jul 27 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 Javascript
解决vue项目获取dom元素宽高总是不准确问题
Jul 29 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 10 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 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 的异常处理程序
2014/06/22 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(五)
2014/06/23 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
2016/06/20 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
2020/01/16 Javascript
python调用shell的方法
2013/11/20 Python
json跨域调用python的方法详解
2017/01/11 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Python爬虫实现爬取百度百科词条功能实例
2019/04/05 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
python excel和yaml文件的读取封装
2021/01/12 Python
世界上最大的冷却器制造商:Igloo Coolers
2019/07/23 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
应届生法律求职信
2013/10/22 职场文书
初三开学计划书
2014/04/27 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
任命书标准格式
2015/03/02 职场文书
刑事上诉状(量刑过重)
2015/05/23 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
想要创业,那么你做好准备了吗?
2019/07/01 职场文书