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中eval函数的使用方法与示例
Apr 09 Javascript
基于jQuery的树控件实现代码(asp.net+json)
Jul 11 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
Apr 16 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
Aug 02 Javascript
js实现炫酷的左右轮播图
Jan 18 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
vue实现全匹配搜索列表内容
Sep 26 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
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
PHP学习之整理字符串
2011/04/17 PHP
Thinkphp 5.0实现微信企业付款到零钱
2018/09/30 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
Javascript中找到子元素在父元素内相对位置的代码
2012/07/21 Javascript
jsonp原理及使用
2013/10/28 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
jquery 抽奖小程序实现代码
2016/10/12 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
微信小程序swiper实现滑动放大缩小效果
2018/11/15 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
详解python使用Nginx和uWSGI来运行Python应用
2018/01/09 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
python实现凯撒密码、凯撒加解密算法
2020/06/11 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
英国女装网上商店:I Saw It First
2018/10/18 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
Bibloo匈牙利:女装、男装、童装及鞋子和配饰
2019/04/14 全球购物
幼儿园教师节活动方案
2014/02/02 职场文书
大学生个人实习的自我评价
2014/02/15 职场文书
库房保管员岗位职责
2014/04/07 职场文书
赡养老人协议书
2014/04/21 职场文书
文案策划专业自荐信
2014/07/07 职场文书
机票销售员态度不好检讨书
2014/09/27 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记
Nginx反向代理、重定向
2022/04/13 Servers