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构造器的实现代码小结
May 16 Javascript
Javascript中自动切换焦点实现代码
Dec 15 Javascript
javascript 实现简单的table排序及table操作练习
Dec 28 Javascript
用JS做的简单的可折叠的两级树形菜单
Sep 21 Javascript
JSON中双引号的轮回使用过程中一定要小心
Mar 05 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
Sep 06 Javascript
浅析javascript函数表达式
Feb 10 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
js随机生成一个验证码
Jun 01 Javascript
原生JavaScript实现todolist功能
Mar 02 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 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
PHP 金额数字转换成英文
2010/05/06 PHP
php自定义函数call_user_func和call_user_func_array详解
2011/07/14 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
利用php输出不同的心形图案
2016/04/22 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
myEvent.js javascript跨浏览器事件框架
2011/10/24 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
2013/03/05 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
jQuery如何使用自动触发事件trigger
2015/11/29 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
vue组件生命周期详解
2017/11/07 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
Python中字典的基础知识归纳小结
2015/08/19 Python
python中的计时器timeit的使用方法
2017/10/20 Python
python程序封装为win32服务的方法
2021/03/07 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
Python datetime 格式化 明天,昨天实例
2020/03/02 Python
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
歌颂祖国的演讲稿
2014/05/04 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
创先争优活动心得体会
2014/09/04 职场文书
乡镇党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
教学反思怎么写
2016/02/24 职场文书
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers