ES6 Promise对象的应用实例分析


Posted in Javascript onJune 27, 2019

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

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

Promise 对象用于一个异步操作的最终完成(或失败)及其结果值的表示。简单点说,它就是用于处理异步操作的,异步处理成功了就执行成功的操作,异步处理失败了就捕获错误或者停止后续操作。

在promise之前处理异步回调的方式

function asyncFun(a,b,callback) {
   setTimeout(function () {
    callback(a+b);
   },200);
  }
  asyncFun(1,2, function (res) {
   if(res > 2) {
    asyncFun(res, 2, function (res) {
     if(res > 4) {
      asyncFun(res, 2, function (res) {
       console.log('ok');
       console.log(res);
      })
     }
    })
   }
  });

从上面可以看出所谓的”回调地狱”的可怕

使用promise来优雅的处理异步

function asyncFun(a,b) {
 return new Promise(function (resolve, reject) {
  setTimeout(function() {
   resolve(a + b);
  },200);
 })
}
asyncFun(1,2)
.then(function (res) {
 if(res > 2) {
  return asyncFun(res, 2);
 }
})
.then(function (res) {
 if(res > 4) {
  return asyncFun(res, 2);
 }
})
.then(function (res) {
 console.log('ok');
 console.log(res);
})
.catch(function (error) {
 console.log(error);
});

使用promise处理内部异常的举例

function asyncFun(a,b) {
 return new Promise(function (resolve, reject) {
  // 模拟异常判断
  if(typeof a !== 'number' || typeof b !== 'number') {
   reject(new Error('no number'));
  }
  setTimeout(function() {
   resolve(a + b);
  },200);
 })
}
asyncFun(1,2)
.then(function (res) {
 if(res > 2) {
  return asyncFun(res, 2);
 }
},function (err) {
 console.log('first err: ', err);
})
.then(function (res) {
 if(res > 4) {
  return asyncFun(res, 'a');
 }
},function (err) {
 console.log('second err: ', err);
})
.then(function (res) {
 console.log('ok');
 console.log(res);
},function (err) {
 console.log('third err: ', err);
});

从上面可以看出通过then的第二个回调函数处理promise对象中的异常,通过reject返回异常的promise对象

通过catch统一处理错误,通过finally执行最终必须执行的逻辑

function asyncFun(a,b) {
 return new Promise(function (resolve, reject) {
  // 模拟异常判断
  if(typeof a !== 'number' || typeof b !== 'number') {
   reject(new Error('no number'));
  }
  setTimeout(function() {
   resolve(a + b);
  },200);
 })
}
asyncFun(1,2)
.then(function (res) {
 if(res > 2) {
  return asyncFun(res, 2);
 }
})
.then(function (res) {
 if(res > 4) {
  return asyncFun(res, 'a');
 }
})
.then(function (res) {
 console.log('ok');
 console.log(res);
})
.catch(function (error) {
 console.log('catch: ', error);
})
.finally(function () {
 console.log('finally: ', 1+2);
});

通过Promise.all()静态方法来处理多个异步

function asyncFun(a,b) {
 return new Promise(function (resolve, reject) {
  setTimeout(function() {
   resolve(a + b);
  },200);
 })
}
var promise = Promise.all([asyncFun(1,2), asyncFun(2,3), asyncFun(3,4)])
promise.then(function (res) {
 console.log(res); // [3, 5, 7]
});

通过Promise.race()静态方法来获取多个异步中最快的一个

function asyncFun(a,b,time) {
 return new Promise(function (resolve, reject) {
  setTimeout(function() {
   resolve(a + b);
  },time);
 })
}
var promise = Promise.race([asyncFun(1,2,10), asyncFun(2,3,6), asyncFun(3,4,200)])
promise.then(function (res) {
 console.log(res); // 5
});

通过Promise.resolve() 静态方法来直接返回成功的异步对象

var p = Promise.resolve('hello');
p.then(function (res) {
 console.log(res); // hello
});

等同于,如下:

var p = new Promise(function (resolve, reject) {
 resolve('hello2');
})
p.then(function (res) {
 console.log(res); // hello2
});

通过Promise.reject() 静态方法来直接返回失败的异步对象

var p = Promise.reject('err')
p.then(null, function (res) {
 console.log(res); // err
});

等同于,如下:

var p = new Promise(function (resolve, reject) {
 reject('err2');
})
p.then(null, function (res) {
 console.log(res); // err
});

通过一个小例子来测试Promise在面向对象中应用

'use strict';
class User{
 constructor(name, password) {
  this.name = name;
  this.password = password;
 }
 send() {
  let name = this.name;
  return new Promise(function (resolve, reject) {
   setTimeout(function () {
    if(name === 'leo') {
     resolve('send success');
    }else{
     reject('send error');
    }
   });
  });
 }
 validatePwd() {
  let pwd = this.password;
  return new Promise(function (resolve, reject) {
   setTimeout(function () {
    if(pwd === '123') {
     resolve('validatePwd success');
    }else{
     reject('validatePwd error');
    }
   });
  })
 }
}
let user1 = new User('Joh');
user1.send()
 .then(function (res) {
  console.log(res);
 })
 .catch(function (err) {
  console.log(err);
 });
let user2 = new User('leo');
user2.send()
 .then(function (res) {
  console.log(res);
 })
 .catch(function (err) {
  console.log(err);
 });
let user3 = new User('leo', '123');
user3.validatePwd()
 .then(function (res) {
  return user3.validatePwd();
 })
 .then(function (res) {
  console.log(res);
 })
 .catch(function(error) {
  console.log(error);
 });
let user4 = new User('leo', '1234');
user4.validatePwd()
 .then(function (res) {
  return user4.validatePwd();
 })
 .then(function (res) {
  console.log(res);
 })
 .catch(function(error) {
  console.log(error);
 });

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

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

Javascript 相关文章推荐
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
jQuery实现提示密码强度的代码
Jul 15 Javascript
node.js微信公众平台开发教程
Mar 04 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
从0到1搭建Element的后台框架的方法步骤
Apr 10 Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
Jul 11 Javascript
angular共享依赖的解决方案分享
Oct 15 Javascript
使用Vue 实现滑动验证码功能
Jun 27 #Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 #Javascript
javascript触发模拟鼠标点击事件
Jun 26 #Javascript
JavaScript动态添加数据到表单并提交的几种方式
Jun 26 #Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 #Javascript
通过javascript实现段落的收缩与展开
Jun 26 #Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 #Javascript
You might like
MySQL 日期时间函数常用总结
2012/06/12 PHP
关于js和php对url编码的处理方法
2014/03/04 PHP
php页面缓存方法小结
2015/01/10 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
jQuery选择没有colspan属性的td的代码
2010/07/06 Javascript
js FLASH幻灯片字符串中有连接符&的处理方法
2012/03/01 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
jQuery中setTimeout的几种使用方法小结
2013/04/07 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
JavaScript中split() 使用方法汇总
2015/04/17 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
bootstrap 表单验证使用方法
2017/01/11 Javascript
微信小程序 swiper制作tab切换实现附源码
2017/01/21 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
Vue-CLI与Vuex使用方法实例分析
2020/01/06 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
python 实现目录复制的三种小结
2019/12/04 Python
全天然狗零食:Best Bully Sticks
2016/09/22 全球购物
美国花园雕像和家居装饰网上商店:Design Toscano
2019/03/09 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
临床医学专业个人的自我评价
2013/09/27 职场文书
房屋改造计划书
2014/01/10 职场文书
好人好事事迹材料
2014/02/12 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
老人院义工活动感想
2015/08/07 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
详解PHP设计模式之依赖注入模式
2021/05/25 PHP