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 相关文章推荐
js导入导出excel(实例代码)
Nov 25 Javascript
jQuery实现鼠标经过图片预览大图效果
Apr 10 Javascript
JavaScript弹出窗口方法汇总
Aug 12 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
如何使用VuePress搭建一个类型element ui文档
Feb 14 Javascript
Vue实现穿梭框效果
Sep 30 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 is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
php中对象引用和复制实例分析
2019/08/14 PHP
PHP程序员简单的开展服务治理架构操作详解(二)
2020/05/14 PHP
jQuery 性能优化手册 推荐
2010/02/23 Javascript
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
2010/11/14 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
node.js中的fs.link方法使用说明
2014/12/15 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
2020/03/17 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
Python中Continue语句的用法的举例详解
2015/05/14 Python
Python实现高效求解素数代码实例
2015/06/30 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
python读写csv文件方法详细总结
2019/07/05 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
python中的selenium安装的步骤(浏览器自动化测试框架)
2020/03/17 Python
Python3实现英文字母转换哥特式字体实例代码
2020/09/01 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
基于OpenCV的网络实时视频流传输的实现
2020/11/15 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
毕业生如何写自我鉴定
2014/03/15 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
2014年学生会干事工作总结
2014/11/07 职场文书
初一军训感言
2015/08/01 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书