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 17 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
React Native AsyncStorage本地存储工具类
Oct 24 Javascript
vue 将页面公用的头部组件化的方法
Dec 18 Javascript
Vue 实现树形视图数据功能
May 07 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
vue-cli3跨域配置的简单方法
Sep 06 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脚本不报错的原因
2014/06/12 PHP
正确的PHP匹配UTF-8中文的正则表达式
2015/05/13 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
键盘 keycode的值 javascript时触发事件时很有用的要素
2009/11/02 Javascript
javascript实现表格排序 编辑 拖拽 缩放
2015/01/02 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
2015/02/17 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
2017/02/08 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
使用requirejs模块化开发多页面一个入口js的使用方式
2017/06/14 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
区分vue-router的hash和history模式
2020/10/03 Javascript
vue-amap根据地址回显地图并mark的操作
2020/11/03 Javascript
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
python中json格式数据输出的简单实现方法
2016/10/31 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
加拿大消费电子和手机购物网站:The Source
2017/01/28 全球购物
国际书籍零售商:Wordery
2017/11/01 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
七年级英语教学反思
2014/01/15 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
高中升旗仪式主持词
2015/07/03 职场文书
Mysql数据库命令大全
2021/05/26 MySQL