Javascript中Promise的四种常用方法总结


Posted in Javascript onJuly 14, 2017

前言

Promise是JavaScript异步操作解决方案,最近看到项目里不少人用了Promise 的库类,比如 bluebird、q 、jQuery.Deffered 等 polyfill promise 方式,使用的时候翻看长长的文档,真心累觉不爱。

es5 发展到现在,node 在0.12版本就已经支持了promise, 在客户端,大部分浏览器也支持了Promise, 如果要兼容低版本的浏览器,可以加上es5-shim等 polyfill promise。下面话不多说,来一起看看详细的介绍:

用法

Promise 常用场景。

  • 处理异步回调
  • 多个异步函数同步处理
  • 异步依赖异步回调
  • 封装统一的入口办法或者错误处理

一、处理异步回调

Promise 的基本用法, 处理异步回调。

function Pro1(){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   resolve('pro1')
  }, 300)
 })
}
//调用
Pro1()
.then(function(data){
 console.log(data) //pro1
})
.catch(function(err){
 throw new Error(err)
})

二、多个异步函数同步处理

有时候我们需要发送两个ajax,希望他们能一起把数据返回,就可以采用下面的办法。

function Pro1(){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   resolve('pro1')
  }, 300)
 })
}
function Pro2(){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   resolve('pro2')
  }, 300)
 })
}
//调用
var Pro = Promise.all([Pro1(), Pro2()]);
Pro
.then(function(data){
 console.log(data[0], data[1]) //Pro1 Pro2
})
.catch(function(err){
 throw new Error(err)
})

三、异步依赖异步回调

有些场景是一个异步依赖另一个异步的返回值的,就可以采用下面的用法。

比如: 用一个订单号异步取到订单详情,再用订单详情里的商品Id获取到商品详情。

function Pro1(orderId){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   var orderInfo = {
    orderId: orderId,
    productIds: ['123', '456']
   }
   resolve(orderInfo.productIds)
  }, 300)
 })
}
function Pro2(productIds){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   var products = productIds.map(function(productId){
    return {
     productId: productId,
     name: '衣服'
    }
   })
   resolve(products)
  }, 300)
 })
}
//调用

Pro1('abc123')
.then(function(productIds){
 console.log('商品id',productIds) 
 return Pro2(productIds)
})
.then(function(products){
 console.log('商品详情',products) 
})
.catch(function(err){
 throw new Error(err)
})

四、封装统一的入口办法或者错误处理

错误处理

function ErrorHandler(promiseObj, rejectOrResOrCallback){
 return promiseObj.then(null, function(err){
 if(!err)
 })
}

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js压缩利器
Feb 20 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
基于Bootstrap+jQuery.validate实现表单验证
May 30 Javascript
js制作支付倒计时页面
Oct 21 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
Nov 04 Javascript
原生Javascript+HTML5一步步实现拖拽排序
Jun 12 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 #Javascript
详解VUE中v-bind的基本用法
Jul 13 #Javascript
vue通过watch对input做字数限定的方法
Jul 13 #Javascript
深入理解vue $refs的基本用法
Jul 13 #Javascript
js自定义弹框插件的封装
Aug 24 #Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 #Javascript
jsonp跨域请求详解
Jul 13 #Javascript
You might like
php cookie 登录验证示例代码
2009/03/16 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
JavaScript中的面向对象介绍
2012/06/30 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
JavaScript限定复选框的选择个数示例代码
2013/08/25 Javascript
jQuery监控文本框事件并作相应处理的方法
2015/04/16 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
在点击div中的p时,如何阻止事件冒泡
2017/02/07 Javascript
MUI 解决动态列表页图片懒加载再次加载不成功的bug问题
2017/04/13 Javascript
js处理包含中文的字符串实例
2017/10/11 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
scrapyd schedule.json setting 传入多个值问题
2019/08/07 Javascript
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
python统计字符的个数代码实例
2020/02/07 Python
python GUI框架pyqt5 对图片进行流式布局的方法(瀑布流flowlayout)
2020/03/12 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
Python 连接 MySQL 的几种方法
2020/09/09 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
欧舒丹英国官网:购买欧舒丹护手霜等明星产品
2017/01/17 全球购物
心理学专业毕业生推荐信范文
2013/11/21 职场文书
九年级语文教学反思
2014/02/04 职场文书
学校欢迎标语
2014/06/18 职场文书
运动会广播稿200字(10篇)
2014/10/12 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
领导视察通讯稿
2015/07/18 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
js中Object.create实例用法详解
2021/10/05 Javascript