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是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
XENON基于JSON变种
Jul 27 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
JavaScript数据结构学习之数组、栈与队列
May 02 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
JS实现商品橱窗特效
Jan 09 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
JavaScript实现无限轮播效果
Nov 19 Javascript
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
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的网址
2006/11/25 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
浅谈PHP接收POST数据方式
2015/06/05 PHP
PHP快速排序quicksort实例详解
2016/09/28 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
PHP children()函数讲解
2019/02/03 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
jQuery多媒体插件jQuery Media Plugin使用详解
2014/12/19 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
微信小程序数据统计和错误统计的实现方法
2019/06/26 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
python中logging模块的一些简单用法的使用
2019/02/22 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
汽车电子与维修专业大学生求职信
2013/09/28 职场文书
安卓程序员求职信
2014/02/28 职场文书
体育教师求职信
2014/06/30 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
交通违章检讨书
2014/09/21 职场文书
法人身份证明书
2015/06/18 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
如何使用python包中的sched事件调度器
2022/04/30 Python