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 jquery做的图片连续滚动代码
Jan 06 Javascript
Jquery 常用方法经典总结
Jan 28 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
react.js使用webpack搭配环境的入门教程
Aug 14 Javascript
zTree获取当前节点的下一级子节点数实例
Sep 05 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
详解开发react应用最好用的脚手架 create-react-app
Apr 24 Javascript
JS+php后台实现文件上传功能详解
Mar 02 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
node中使用shell脚本的方法步骤
Mar 23 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
第十四节 命名空间 [14]
2006/10/09 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
javascript 正则替换 replace(regExp, function)用法
2010/05/22 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
javascript实现数组去重的多种方法
2016/03/14 Javascript
JavaScript对象数组如何按指定属性和排序方向进行排序
2016/06/15 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
Javascript面试经典套路reduce函数查重
2017/03/23 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
React 组件渲染和更新的实现代码示例
2019/02/21 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
[48:31]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第二场 12.17
2020/12/19 DOTA
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
总结python中pass的作用
2019/02/27 Python
Django框架封装外部函数示例
2019/05/28 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
激情洋溢的毕业生就业求职信
2014/03/15 职场文书
工业自动化专业自荐信范文
2014/04/10 职场文书
《放飞蜻蜓》教学反思
2014/04/27 职场文书
2014小学数学教研组工作总结
2014/12/06 职场文书
被委托人身份证明
2015/08/07 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
导游词之井冈山
2019/11/20 职场文书
实体类或对象序列化时,忽略为空属性的操作
2021/06/30 Java/Android