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 相关文章推荐
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
JQUERY获取form表单值的代码
Jul 17 Javascript
使用jquery获取网页中图片高度的两种方法
Sep 26 Javascript
AngularJS内置指令
Feb 04 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
vue实现lodop打印功能的示例
Nov 11 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 保留小数点
2009/04/21 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
JavaScript 类型的包装对象(Typed Wrappers)
2011/10/27 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
js的image onload事件使用遇到的问题
2014/07/15 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
2016/08/24 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
python实现中文输出的两种方法
2015/05/09 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
python实现矩阵打印
2019/03/02 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Python考拉兹猜想输出序列代码实践
2019/07/05 Python
使用python 的matplotlib 画轨道实例
2020/01/19 Python
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
超市中秋节活动方案
2014/02/12 职场文书
学习十八大报告感言
2014/02/28 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
《小小的船》教学反思
2016/02/18 职场文书
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
Python使用OpenCV和K-Means聚类对毕业照进行图像分割
2021/06/11 Python