JavaScript:理解Promise方法
什么是promise?
Promise的核心思想是代表异步操作的一个结果,并且promise具有三个状态(pending初始状态,fulfilled成功状态,rejected失败状态)。我们可以理解为使用promise可以实现非阻塞io的功能,根据三个不同的状态,我们可以知道回调函数实现在哪个过程。
Promise.prototype.then
源码分析:
this.then = function(onFulfilled) {
if (typeof onFulfilled !== "function") return this;
return new Promise(function(resolve, reject) {
asap(function() {
try {
resolve(onFulfilled(value));
} catch (ex) {
reject(ex);
}
});
});
}; this.then = function(onFulfilled, onRejected) {
return new self.constructor(function(resolve, reject) {
handle(new Handler(onFulfilled, onRejected, resolve, reject));
});
}; ValuePromise.prototype = Promise.prototype;
我们知道.then先是以对象的属性实现的方法,随后是以继承的方式实现的方法,所以then方法可以具有一个参数.then(onFulfilled),又可具有二个参数.then(onFulfilled,onRejected),第一个参数为操作成功的回调函数,并且第二个参数是操作失败的回调函数,然后从上面的handle方法可以看出then的二个参数以数组对象的形式保存在一个队列(deferreds)里面,然后从队列里面处理then方法。
.then链式调用
例子(略由于非链式每次都是promise迭代而已):
// 新建一个返回promise对象的函数
var p1 = function constructorpromise (a) {
return new Promise(function(resolve, reject) {
resolve(1)
});
} // 实现链式调用
var con = constructorpromise(2)
con
.then(function(a) {
var second = document.getElementsByClassName('part-second')[0]
second.innerText = a
return a + 2
})
.then(function(b) {
var first = document.getElementsByClassName('part-first')[0]
first.innerText = b
})
注意以上有二个then方法实现的回调,第一个then方法调用传参是从promise中resolve回调传入的参数值1,第二个then方法调用传参是上一个then方法内部return传递下来的值3(return a +2),因此第二个then参数获得的结果为3。(切记:如果是链式调用then,那么从第二个then开始的参数都是从上一个then的返回的结果,如果上一个then没有return,那么下一个then的参数为undefined)
Promise.all()
源码分析:
Promise.all = function(arr) {
var args = Array.prototype.slice.call(arr);
return new Promise(function(resolve, reject) {
if (args.length === 0) return resolve([]);
var remaining = args.length;
function res(i, val) {
try {
if (val && (typeof val === "object" || typeof val === "function")) {
var then = val.then;
if (typeof then === "function") {
then.call(val, function(val) {
res(i, val);
}, reject);
return;
}
}
args[i] = val;
if (--remaining === 0) {
resolve(args);
}
} catch (ex) {
reject(ex);
}
}
for (var i = 0; i < args.length; i++) {
res(i, args[i]);
}
});
};
从以上可以看出,当all的方法内参数为空时(args.length === 0),就会返回一个resolve方法的迭代对象。如果不为空,且all方法的数组上也不是promise时,那么就会输出值args[i] = val;也就是说返回初始值pending。如果all方法的数组项是promise时,就会回调resolve()并返回每一项的结果。
例子:
var promise = Promise.resolve(3);
Promise.all([true, promise]).then(values => {
console.log(values); // [true, 3]
});
Promise.race([])
源码分析:
Promise.race = function(values) {
return new Promise(function(resolve, reject) {
values.forEach(function(value) {
Promise.resolve(value).then(resolve, reject);
});
});
};
其实.race方法内部的数组每一项如果都用promise的resolve方法实现的迭代,那么数组内每一项promise的状态都会发生改变,就像race英文的意思"赛跑,竞争",表示promise哪一项先执行resolve回调,哪一项promise就会先执行回调函数并返回resolve结果。
例子:
var p1 = new Promise(function(resolve, reject) {
setTimeout(resolve, 500, "one");
});
var p2 = new Promise(function(resolve, reject) {
setTimeout(resolve, 100, "two");
}); Promise.race([p1, p2]).then(function(value) {
console.log(value); // "two"
// Both resolve, but p2 is faster
});
参考:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise#参见
https://segmentfault.com/a/1190000007032448#articleHeader10
https://www.promisejs.org/api/
JavaScript:理解Promise方法的更多相关文章
- 全面理解Javascript中Promise
全面理解Javascript中Promise 最近在学习Promise的时候,在网上收集了一些资料,发现很多的知识点不够系统,所以小编特意为大家整理了一些自认为 比较好的文章,供大家更好地学习js中非 ...
- javascript中concat方法深入理解
最近在恶补js知识的时候,总是会因为js强大的语法而感到震撼.因为以前对前端方面的疏忽,导致了一些理解的错误.因此痛改前非,下定决心,不管做什么事情,都要有专研的精神. 在介绍前,抛出一个问题:如何将 ...
- JavaScript深入理解sort()方法
一. 基本用法 let arr1 = [3, 5, 7, 1, 8, 7, 10, 20, 19] console.log(arr1.sort()) // [1, 10, 19, 20, 3, 5, ...
- javascript创建对象的方法--工厂模式(非常好理解)
javascript创建对象的方法--工厂模式(非常好理解) 一.简介 创建对象的方法 本质上都是把"属性"和"方法",封装成一个对象 创建对象的基本模式 普通 ...
- 大白话讲解Promise(二)理解Promise规范
上一篇我们讲解了ES6中Promise的用法,但是知道了用法还远远不够,作为一名专业的前端工程师,还必须通晓原理.所以,为了补全我们关于Promise的知识树,有必要理解Promise/A+规范,理解 ...
- 彻底理解Promise对象——用es5语法实现一个自己的Promise(上篇)
本文同步自我的个人博客: http://mly-zju.github.io/ 众所周知javascript语言的一大特色就是异步,这既是它的优点,同时在某些情况下也带来了一些的问题.最大的问题之一,就 ...
- 160701、理解 Promise 的工作原理
Javascript 采用回调函数(callback)来处理异步编程.从同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的厄运的回调金字塔(Pyramid of Doo ...
- 160623、理解 Promise 的工作原理
Javascript 采用回调函数(callback)来处理异步编程.从同步编程到异步回调编程有一个适应的过程,但是如果出现多层回调嵌套,也就是我们常说的厄运的回调金字塔(Pyramid of Doo ...
- Salesforce Javascript(一) Promise 浅谈
本篇参看: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise https ...
随机推荐
- PS2018学习笔记(25-29节)
25-亮度与色阶看懂直方图-part1 # 本节知识点: 灰度模式 明暗对比 明度/对比度命令 直方图 色阶命令 调整图层 # 本节段落表: 了解亮度对比 灰度模式观察明暗 明度/对比度命令 认知对比 ...
- Ubuntu16.04启动xtion pro live报错
william@william-System-Product-Name:~$ roslaunch openni2_launch openni2.launch ... logging to /home/ ...
- 2018宁夏邀请赛G(DFS,动态规划【VECTOR<PAIR>】)
//代码跑的很慢四秒会超时,结尾附两秒代码(标程) #include<bits/stdc++.h>using namespace std;typedef long long ll;cons ...
- 读《JavaScript权威指南》笔记(二)
1.加号运算和比较运算符的区别 对于数字和字符串操作符来说,加号运算符和比较运算符的行为都有所不同,前者更偏爱字符串,如果它的其中一个操作数是字符串的话,则进行字符串连接操作.而比较运算符则更偏爱数字 ...
- 洛谷P2258 子矩阵
P2258 子矩阵 题目描述 给出如下定义: 子矩阵:从一个矩阵当中选取某些行和某些列交叉位置所组成的新矩阵(保持行与列的相对顺序)被称为原矩阵的一个子矩阵. 例如,下面左图中选取第2.4行和第2.4 ...
- 洛谷P2534 [AHOI2012]铁盘整理
P2534 [AHOI2012]铁盘整理 题目描述 输入输出格式 输入格式: 共两行.第一行为铁盘个数N(1<=N<=50),第二行为N个不同的正整数,分别为从上到下的铁盘的半径R.(1& ...
- dbms_xplan的display查看执行计划
DBMS_XPLAN包包括一系列函数,主要是用于显示SQL语句的执行计划,且不同的情形下使用不同的函数来显示,如预估的执行计划则使用 display函数,而实际的执行计划则是用display_curs ...
- uuid安装 插件安装
yum -y install uuid uuid-devel 安装uuid包tar -zxvf uuid-1.6.1.tar.gzcd uuid-1.6.1./configuremakemake in ...
- IDEA调试方法总结及各种Step的区别
1.打断点 IDEA 添加断点的方式还是比较简单的,我们可以直接在某一行的代码行号后点击鼠标左键进行添加 2.启动调试 如果我们想要调试我们的程序,那我们必须以DEBUG的形式启动我们的程序,以DEB ...
- kuangbin专题十二 HDU1029 Ignatius and the Princess IV (水题)
Ignatius and the Princess IV Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32767 K ( ...