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 相关文章推荐
学习ExtJS(二) Button常用方法
Oct 07 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
JavaScript获取路径设计源码
May 22 Javascript
Bootstrap每天必学之表格
Nov 23 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
Sep 04 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
angular.js实现购物车功能
Oct 23 Javascript
Vue项目数据动态过滤实践及实现思路
Sep 11 Javascript
NProgress显示顶部进度条效果及使用详解
Sep 21 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
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
[对联广告] JS脚本类
2006/08/27 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
jQuery表格排序组件-tablesorter使用示例
2014/05/26 Javascript
简单讲解jQuery中的子元素过滤选择器
2016/04/18 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
React Native预设占位placeholder的使用
2017/09/28 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
关于ES6尾调用优化的使用
2020/09/11 Javascript
[53:15]Mineski vs iG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
tensorflow 输出权重到csv或txt的实例
2018/06/14 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
linux下进程间通信的方式
2013/01/23 面试题
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
运动会入场词60字
2014/02/15 职场文书
护士岗位职责
2014/02/16 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
事业单位考察材料范文
2014/12/25 职场文书
5.12护士节活动总结
2015/02/10 职场文书
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle
vue 自定义的组件绑定点击事件
2022/04/21 Vue.js