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原型对象通俗"唱法"
Dec 27 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
Angular 2.0+ 的数据绑定的实现示例
Aug 09 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
在vue中使用SockJS实现webSocket通信的过程
Aug 29 Javascript
vue 属性拦截实现双向绑定的实例代码
Oct 24 Javascript
微信小程序实现蒙版弹窗效果
Nov 01 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
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
destoon实现调用图文新闻的方法
2014/08/21 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
php发送短信验证码完成注册功能
2015/11/24 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
用JS实现图片轮播效果代码(一)
2016/06/26 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
完美实现js焦点轮播效果(一)
2017/03/07 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
2018/03/05 Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
在Vue中使用antv的示例代码
2020/06/29 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
Python关于反射的实例代码分享
2020/02/20 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
机修工岗位职责
2013/11/24 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
《搭石》教学反思
2014/04/07 职场文书
学习保证书范文
2014/04/30 职场文书
李敖北大演讲稿
2014/05/24 职场文书
2015年市场营销工作总结
2015/07/23 职场文书
企业财务管理制度范本
2015/08/04 职场文书
门卫管理制度范本
2015/08/05 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书