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基本编码模式小结
May 23 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
浅谈String.valueOf()方法的使用
Jun 06 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
Jun 12 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 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 spl_autoload_register实现自动加载研究
2011/12/06 PHP
PHP Web木马扫描器代码分享
2015/09/06 PHP
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
Jquery实现三层遍历删除功能代码
2013/04/23 Javascript
浅析Node.js查找字符串功能
2014/09/03 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
jQuery 实现批量提交表格多行数据的方法
2018/08/09 jQuery
angularJs在多个控制器中共享服务数据的方法
2018/09/30 Javascript
微信小程序canvas分享海报功能
2019/10/31 Javascript
vue实现下拉菜单树
2020/10/22 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
python访问系统环境变量的方法
2015/04/29 Python
python中随机函数random用法实例
2015/04/30 Python
python中Apriori算法实现讲解
2017/12/10 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
Pytorch中accuracy和loss的计算知识点总结
2019/09/10 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
HTML5+Canvas+CSS3实现齐天大圣孙悟空腾云驾雾效果
2016/04/26 HTML / CSS
详解如何通过H5(浏览器/WebView/其他)唤起本地app
2017/12/11 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
澳大利亚领先的武术用品和健身器材供应商:SMAI
2019/03/24 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
冰淇淋店的创业计划书
2014/02/07 职场文书
《落花生》教学反思
2014/02/25 职场文书
护理人员的自我评价分享
2014/03/15 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
英语投诉信范文
2015/07/03 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python
Pygame游戏开发之太空射击实战敌人精灵篇
2022/08/05 Python