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实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
jQuery原生的动画效果
Jul 10 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
EasyUI布局 高度自适应
Jun 04 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
详解Angular 4.x NgIf 的用法
May 22 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
vue2.0自定义指令示例代码详解
Apr 25 Javascript
一个手写的vue放大镜效果
Aug 09 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实现mysql同步的实现方法
2009/10/21 PHP
php更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
PHP中使用匿名函数操作数据库的例子
2014/11/17 PHP
PHP数组操作简单案例分析
2016/10/15 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
JavaScript监听一个DOM元素大小变化
2020/04/26 Javascript
python实现封装得到virustotal扫描结果
2014/10/05 Python
Python中几种导入模块的方式总结
2017/04/27 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
python和JavaScript哪个容易上手
2020/06/23 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
Html5自定义字体解决方法
2019/10/09 HTML / CSS
为什么UNION ALL比UNION快
2016/03/17 面试题
Java语言程序设计测试题判断题部分
2013/01/06 面试题
简单的辞职信范文
2014/01/18 职场文书
实习单位评语
2014/04/26 职场文书
趣味运动会策划方案
2014/06/02 职场文书
公司活动总结怎么写
2014/06/25 职场文书
如何写股份合作协议书
2014/09/11 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
小学教师师德师风自我剖析材料
2014/09/29 职场文书
捐款通知怎么写
2015/04/24 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
高通2023 年将发布高性能PC处理器
2022/04/29 数码科技