javascript的Promis对象
javascript的Promis对象
背景
JavaScript作为单线程运行于浏览器之中,这是每本JavaScript教科书中都会被提到的。在浏览器中的大多数任务都是异步(无阻塞)执行的,例如:鼠标点击事件、窗口大小拖拉事件、定时器触发事件、Ajax完成回调事件等。当每一个异步事件完成时,它都将被放入一个叫做”浏览器事件队列“中的事件池中去。而这些被放在事件池中的任务,将会被javascript引擎单线程处理的一个一个的处理,当在此次处理中再次遇见的异步任务,它们也会被放到事件池中去,等待下一次的tick被处理。由于浏览器的这种内部事件循环机制,所以JavaScript一直以callback回调的方式来处理事件任务。因此无所避免的对于多个的JavaScript异步任务的处理,将会遇见”callback hell“(回调地狱),使得这类代码及其不可读和难易维护。
看下面代码:
asyncData1(data, function (data1){asyncTData2(data1, function (data2){asyncData3(data2, function (data3){// .... 魔鬼式的金字塔还在继续});});});
Promise示例
var promise = new Promise(function(resolve, reject){//do some asyn thingssetTimeout(function(){resolve({name : 'jack',age : 22});},1000)
});function fulFillFunc(data){console.log("fuldata2="+data);
}function rejectFunc(data){console.log("rejdata="+data);
}promise.then(fulFillFunc,rejectFunc);
这就是promis,promis在英语中的意思是承诺,跟咱们程序猿一样,很专一。
promis的状态
promis一共有三个状态:pending、Fulfilled、Rejected;pending是promis对象的初始状态,等到异步任务完成或者被拒绝的时候,状态发生转变。任务完成状态的转变是从pending转到Fulfilled;任务被拒绝时状态的转变是从pending转到Rejected,不吃回头草(不可逆向转变),也不这胸望着那胸高(fulfilled和rejected两种状态不可相互转换)。
Promise构造函数
Promise的构造函数接收一个必填的参数,且该参数为函数,这个参数函数还包含两个函数参数,第一个resolve是触发Promise对象状态从pending转变为fulfilled的函数,第二个reject是触发Promise对象状态从pending转变为rejected的函数。当执行了resolve函数的时候,Promise对象状态就转换成了fulfilled;当执行了reject函数,Promise对象的状态就转换成了rejected。
then
Promise对象必须实现then方法,then是promise规范的核心,而且then方法也必须返回一个Promise对象,同一个Promise对象可以注册多个then方法,并且回调的执行顺序跟它们的注册顺序一致;then方法接受两个回调函数,它们分别为:成功时的回调和失败时的回调;并且它们分别在:Promise由“Pending”状态转换到“Fulfilled”状态时被调用和在Promise由“Pending”状态转换到“Rejected”状态时被调用。
多个任务的串行执行
在上文中提到的回调地狱案例,就是一种试图去将多个异步的任务串行处理的结果,使得代码不断的横向延伸,可读性和维护性急剧下降。当然我们也提到了Promise利用链式和延迟执行模型,将代码从横向延伸拉回了纵向增长。使用Angular中$http的实现如下:
$http.get('/data1').then(function(data1){//dosomethingconsole.log('data1', data1);return $http.get('/data2', {params: data1.result});}).then(function(data2){//dosomethingconsole.log('data2', data2);return $http.get('/data3', {params: data2.result});}).then(function(data3){//dosomethingconsole.log('data3', data3.result);});
多个任务的并行执行
在有些场景下,我们所要处理的多个异步任务之间并没有像上例中的那么强的依赖关系,只需要在这一系列的异步任务全部完成的时候执行一些特定逻辑。这个时候为了性能的考虑等,我们不需要将它们都串行起来执行,并行执行它们将是一个最优的选择。如果仍然采用回调函数,则这是一个非常恼人的问题。利用Promise则同样可以优雅的解决它:
var promise1 = new Promise(function(resolve, reject){//do some asyn thingssetTimeout(function(){resolve({name : 'jack',age : 22});},1000);
});
var promise2 = new Promise(function(resolve, reject){//do some asyn thingssetTimeout(function(){resolve({name : 'wen',age : 23});},1000);
});
var promise3 = Promise.resolve(110)
Promise.all([promise1,promise2,promise3]).then(function(data){console.log(data[0]);console.log(data[1]);console.log(data[2]);
},function(){console.log("rejected");
})
javascript的Promis对象相关推荐
- 创建健壮的isArray()函数(JavaScript中判断对象类型的种种方法)
我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...
- JavaScript强化教程——对象的值传递和引用传递
2019独角兽企业重金招聘Python工程师标准>>> 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程--对象的值传递和引用传递 func ...
- 第一百一十四节,JavaScript文档对象,DOM进阶
JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...
- 在JavaScript中删除对象
本文翻译自:Deleting Objects in JavaScript I'm a bit confused with JavaScript's delete operator. 我对JavaScr ...
- 如何在Javascript中访问对象的第一个属性?
本文翻译自:How to access the first property of an object in Javascript? Is there an elegant way to access ...
- 检查值是否是JavaScript中的对象
如何检查值是否是JavaScript中的Object? #1楼 尝试这个 if (objectName instanceof Object == false) {alert('Not an objec ...
- JavaScript学习笔记——对象知识点
javascript对象的遍历.内存分布和封装特性 一.javascript对象遍历 1.javascript属性访问 对象.属性 对象[属性] //字符串格式 //javascript属性的访问方法 ...
- javascript之window对象详解
window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clea ...
- javascript 数组和对象的浅复制和深度复制 assign/slice/concat/JSON.parse(JSON.stringify())...
javascript 数组和对象的浅度复制和深度复制 在平常我们用 '='来用一个变量引用一个数组或对象,这里是'引用'而不是复制下面我们看一个例子引用和复制是什么概念 var arr=[1,2,3, ...
最新文章
- java 随机取三个_Java-Random 从五个人中随机三个 且不能重复
- poj1523(割点)
- ExecuteScalar()如何返回整数
- 看门狗(独立看门狗)与窗口看门狗的区别!
- C++头文件引入的一种小问题
- [QTP] 描述性编程
- Fedora和Red Hat Enterprise Linux实用指南(第6版)(套装上下册)火热上市!!!!
- CoreAnimation-CABasicAnimation
- 第三天 LINUX安全
- 太原市智能家居行业协会成立
- Ubuntu全盘备份与恢复,亲自总结,实测可靠
- 算法学习之路|取石子
- 算法竞赛入门经典 1 实验
- HTML中包含地图和筛选条件,如何实现DedeCMS多条件筛选并以筛选词为标题
- 哲学家就餐问题之管程
- ie11无法播放html,IE11无法显示flash?IE11无法播放视频的解决方法
- pat 训练题 7-5 基友团 (25分) 暴力判团和最大团
- 今晚折腾了好久,win7极限精简版239M在虚拟机未成功?
- 怀念父亲母亲-端午节快乐
- Tracking By Detecting的多目标跟踪
热门文章
- 微信公众号如何实现拥有一个视频列表?通过酷播云
- 二进制与十进制互相转换
- 零基础学画画,一套非常详细的手绘教程,4步教会你画,收藏学习
- 2021年中国研究生数学建模竞赛E题信号干扰下的超宽带(UWB)精确定位问题思路参考代码
- PMP考试最新官方通知:11月28日考试确定延期
- 3.1实现顺序栈的各种基本运算
- 【C++】getline函数用法
- python颜色形状识别_Python学习(10)Python+Opencv颜色和形状检测
- js实现文件获取和文件下载
- 十四、基于DMSP/OLS、NPP/VIIRS夜间灯光数据和兴趣点(POI)城市建成区提取——POI数据建成区提取