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 相关文章推荐
jQuery表格行换色的三种实现方法
Jun 27 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
js禁止浏览器页面后退功能的实例(推荐)
Sep 01 Javascript
JS同步、异步、延迟加载的方法
May 05 Javascript
vue实现移动端悬浮窗效果
Dec 01 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
Nov 20 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
js实现点击选项置顶动画效果
Aug 25 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
如何使用PHP获取网络上文件
2006/10/09 PHP
php 面试碰到过的问题 在此做下记录
2011/06/09 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
PHP微信企业号开发之回调模式开启与用法示例
2017/11/25 PHP
laravel 解决paginate查询多个字段报错的问题
2019/10/22 PHP
javascript类继承机制的原理分析
2009/09/12 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
js解决movebox移动问题
2016/03/29 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
微信小程序 点击控件后选中其它反选实例详解
2017/02/21 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
[02:22]2018DOTA2亚洲邀请赛VG赛前采访
2018/04/03 DOTA
python绘制简单折线图代码示例
2017/12/19 Python
python 切换root 执行命令的方法
2019/01/19 Python
python实现websocket的客户端压力测试
2019/06/25 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
MYSQL支持事务吗
2013/08/09 面试题
领导干部四风问题自我剖析材料
2014/09/25 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
小石潭记导游词
2015/02/03 职场文书
军训新闻稿范文
2015/07/17 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS