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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
js DOM模型操作
Dec 28 Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
jQuery入门基础知识学习指南
Aug 14 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
bootstrap flask登录页面编写实例
Nov 01 Javascript
vue权限问题的完美解决方案
May 08 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 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连接MongoDB示例代码
2012/09/06 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
培养自己的php编码规范
2015/09/28 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
jquery操作cookie插件分享
2014/01/14 Javascript
jQuery实现点击弹出背景变暗遮罩效果实例代码
2016/06/24 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
浅谈React Native 中组件的生命周期
2017/09/08 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
React Native基础入门之调试React Native应用的一小步
2018/07/02 Javascript
微信小程序制作表格的方法
2019/02/14 Javascript
jQuery实现动态添加和删除input框实例代码
2019/03/26 jQuery
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
python自定义时钟类、定时任务类
2021/02/22 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
使用python实现男神女神颜值打分系统(推荐)
2019/10/31 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
对Pytorch 中的contiguous理解说明
2021/03/03 Python
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
商务英语大学生职业生涯规划书范文
2014/01/01 职场文书
入股协议书
2014/04/14 职场文书
感恩母亲节活动总结
2015/02/10 职场文书