JavaScript中Promise函数then的奥秘探究
Promise概述
- Promise对象是CommonJS工作组提出的一种规范,目的是为异步操作提供统一接口。
那么,什么是Promises?
首先,它是一个对象,也就是说与其他JavaScript对象的用法,没有什么两样;其次,它起到代理作用(proxy),充当异步操作与回调函数之间的中介。它使得异步操作具备同步操作的接口,使得程序具备正常的同步运行的流程,回调函数不必再一层层嵌套。
简单说,它的思想是,每一个异步任务立刻返回一个Promise对象,由于是立刻返回,所以可以采用同步操作的流程。这个Promises对象有一个then方法,允许指定回调函数,在异步任务完成后调用。
Promise的then方法可以接受前一个函数的执行结果,还可以保证另一个Promise的顺序执行,这到底是怎么做到的呢?
原理图(先上图)
问题需求
如何保证多个 promise 顺序执行?
实例:
var f1 = function (){
return new Promise(function (resolve, reject){
setTimeout(function (){
console.log("f1 ok!")
resolve("f1 ok!");
}, 1000)
});
}
var f2 = function (){
return new Promise(function (resolve, reject){
setTimeout(function (){
console.log("f2 ok!")
resolve("f2 ok!");
}, 3000)
});
}
var f3 = function (){
return new Promise(function (resolve, reject){
setTimeout(function (){
console.log("f3 ok!")
resolve("f3 ok!");
}, 2000)
});
}
//前端全栈学习交流圈:866109386
//面向1-3经验年前端开发人员
//帮助突破技术瓶颈,提升思维能力
当然如果要并行的话,我们很容易想到 Promise.all 方法:
Promise.all([f1(), f2(), f3()]).then(function (data){
console.log(data)
})
// f1 ok!
// f3 ok!
// f2 ok!
// ["f1 ok!", "f2 ok!", "f3 ok!"]
如果要顺序执行:
f1().then(f2).then(f3)
// f1 ok!
// f2 ok!
// f3 ok!
//或者这样
function f(all) {
var promise = Promise.resolve();
all.forEach((p, index) => {
promise = promise.then(p)
})
}
f([f1, f2, f3])
那么问题来了,then是如何做到顺序执行的呢,参数既可以是一个普通函数,也可是是一个返回promise的函数?
then的奥秘
很多实现promise的库都比较复杂,如果自己实现的话,可以借鉴下面简单的代码:
Promise.prototype.then = function(onFulfilled, onRejected) {
var promise = this;
return new Promise(function(resolve, reject) {
function handle(value) {
var ret = typeof onFulfilled === 'function' && onFulfilled(value) || value;
if (ret && typeof ret['then'] == 'function') {
ret.then(function(value) {
resolve(value);
}, function(reason) {
reject(reason);
});
} else {
resolve(ret);
}
}
function errback(reason) {
reason = typeof onRejected === 'function' && onRejected(reason) || reason;
reject(reason);
}
if (promise._status === 'PENDING') {
promise._resolves.push(handle);
promise._rejects.push(errback);
} else if (promise._status === FULFILLED) {
callback(promise._value);
} else if (promise._status === REJECTED) {
errback(promise._reason);
}
});
}
//前端全栈学习交流圈:866109386
//面向1-3经验年前端开发人员
//帮助突破技术瓶颈,提升思维能力
重点在then的实现,看上述代码,每个then返回的是什么,是一个新的 Promise,一个新的 Promise,一个新的 Promise
第二个重点是,在内部又处理了一个 回调函数运行结果是 一个 promise的 判断,如果是那么等待这个promise运行结束才调用 resolve 更改状态,关键是resolve的调用时机,resolve的调用时机,才能够往下执行,这两步就是then函数的关键。
是不是 有点晕,请看最开始的图。

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
-
上一篇
Choerodon 的微服务之路(三):服务注册与发现
本文是 Choerodon 的微服务之路系列推文第三篇。在上一篇《Choerodon的微服务之路(二):微服务网关》中,介绍了Choerodon 在搭建微服务网关时考虑的一些问题以及两种常见的微服务网关模式,并且通过代码介绍了Choerodon 的网关是如何实现的。本篇文章将介绍Choerodon 的注册中心,通过代码的形式介绍 Choerodon 微服务框架中,是如何来实现服务注册和发现的。 ▌文章的主要内容包括: 服务注册/发现 服务注册表 健康检查 在上一篇文章的开始,我们提到解决微服务架构中的通信问题,基本只要解决下面三个问题: 服务网络通信能力 服务间的数据交互格式 服务间如何相互发现与调用 网络的互通保证了服务之间是可以通信的,通过对JSON 的序列化和反序列化来实现网络请求中的数据交互。Choerodon 的 API 网关则统一了所有来自客户端的请求,并将请求路由到具体的后端服务上。然而这里就会有一个疑问,API 网关是如何与后端服务保持通信的,后端服务之间又是如何来进行通信的?当然我们能想到最简单的方式就是通过 URL + 端口的形式直接访问(例如:http://127...
-
下一篇
使用nginx image filter实现类OSS对象存储中对图片的实时处理
使用Nginx image_filter实现类似OSS图片处理 在家使用自己的电脑做了一个小应用,可查看照片,按以前的方式,需要在用户上传图片后对进行裁剪压缩,然后给前端一个缩略图地址与原图地址。这种方式有两个弊端磁盘空间的浪费、缩略图尺寸调整不便捷。是否有其他不使用云OSS存储的情况下自己实现一套类似OSS的图片处理? 后来搜索资料,发现使用nginx的image_filter可以实现。根据网上其他人的实例使用没有成功。 安装nginx与imageFilter不在复述,自己从网上看文章就可以了。我使用的版本是nginx 1.13.12 直接自带该插件。 自己调整后可以使用,下面贴出完整配置。 server { listen 80; server_name 127.0.0.1; charset utf-8; root /www/uploadfile; #拦截所有带“!”号的图片请求 location ~* ^(.*\.(?:jpg|gif|png|jpeg|bmp))!(.*){ #rewrite ^(.*\.(?:jpg|gif|png))! $1; #图片访问路径 set $fil...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker容器配置,解决镜像无法拉取问题
- Docker安装Oracle12C,快速搭建Oracle学习环境
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- 2048小游戏-低调大师作品
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- SpringBoot2初体验,简单认识spring boot2并且搭建基础工程
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- MySQL数据库在高并发下的优化方案