ES6标准出炉之前,一个幽灵,回调的幽灵,游荡在JavaScript世界。

正所谓:

世界本没有回调,写的人多了,也就有了})})})})})

Promise的兴起,是因为异步方法调用中,往往会出现回调函数一环扣一环的情况。这种情况导致了回调金字塔问题的出现。不仅代码写起来费劲又不美观,而且问题复杂的时候,阅读代码的人也难以理解。
举例如下:

db.save(data, function(data){// do something...db.save(data1, function(data){// do something...db.save(data2, function(data){// do something...done(data3); // 返回数据})});
});

假设有一个数据库保存操作,一次请求需要在三个表中保存三次数据。那么我们的代码就跟上面的代码相似了。这时候假设在第二个db.save出了问题怎么办?基于这个考虑,我们又需要在每一层回调中使用类似try...catch这样的逻辑。这个就是万恶的来源,也是node刚开始广为诟病的一点。

另外一个缺点就是,假设我们的三次保存之间并没有前后依赖关系,我们仍然需要等待前面的函数执行完毕, 才能执行下一步,而无法三个保存并行,之后返回一个三个保存过后需要的结果。(或者说实现起来需要技巧)

不幸的是,在我刚开始接触node的时候,我写了大量这样的hell。

作为一个有时还动下脑子的程序员,我尝试了朴灵大人的eventproxy。后来因为还是写前端代码多一些,我接触了ES6,发现了一个解决回调深渊的利器Promise

其实早在ES6的Promise之前,Qwhen.jsbluebird等等库早就根据Promise标准(参考Promise/A+)造出了自己的promise轮子。
(看过一篇文章,我觉得很有道理。里面说,不要扩展内置的原生对象。这种做法是不能面向未来的。所以这里有一个提示:使用扩展原生Promise的库时,需要谨慎。)

这里仅讨论原生的Promise

ES6 Promise

Promise对象状态

在详解Promise之前,先来点理论:

Promise/A+规范, 规定Promise对象是一个有限状态机。它三个状态:

  • pending(执行中)

  • fulfilled(成功)

  • reject(拒绝)

其中pending为初始状态,fulfilled和rejected为结束状态(结束状态表示promise的生命周期已结束)。

状态转换关系为:

pending->fulfilled,pending->rejected。

随着状态的转换将触发各种事件(如执行成功事件、执行失败事件等)。

Promise形式

Promise的长相就像这样子:

var promise = new Promise(function func(resolve, reject){// do somthing, maybe asyncif (success){return resolve(data);} else {return reject(data);}
});promise.then(function(data){// do something... e.gconsole.log(data);
}, function(err){// deal the err.
})

这里的变量promisePromise这个对象的实例。

promise对象在创建的时候会执行func函数中的逻辑。

逻辑处理完毕并且没有错误时,resolve这个回调会将值传递到一个特殊的地方。这个特殊的地方在哪呢?就是下面代码中的then,我们使用then中的回调函数来处理resolve后的结果。比如上面的代码中,我们将值简单的输出到控制台。如果有错误,则rejectthen的第二个回调函数中,对错误进行处理。

配合上面的有限状态机的理论,我们知道在Promise构造函数中执行回调函数代码时,状态为pendingresolve之后状态为fulfilledreject之后状态为reject

Promise数据流动

以上是promise的第一次数据流动情况。

比较funny的是,promise的then方法依然能够返回一个Promise对象,这样我们就又能用下一个then来做一样的处理。

第一个then中的两个回调函数决定第一个then返回的是一个什么样的Promise对象。

  • 假设第一个then的第一个回调没有返回一个Promise对象,那么第二个then的调用者还是原来的Promise对象,只不过其resolve的值变成了第一个then中第一个回调函数的返回值。

  • 假设第一个then的第一个回调函数返回了一个Promise对象,那么第二个then的调用者变成了这个新的Promise对象,第二个then等待这个新的Promise对象resolve或者reject之后执行回调。

话虽然饶了一点,但是我自我感觉说的还是很清楚的呢。哈哈~

如果任意地方遇到了错误,则错误之后交给遇到的第一个带第二个回调函数的then的第二个回调函数来处理。可以理解为错误一直向后reject, 直到被处理为止。

另外,Promise对象还有一个方法catch,这个方法接受一个回调函数来处理错误。即:

promise.catch(function(err){// deal the err.
})

假设对错误的处理是相似的,这个方法可以对错误进行集中统一处理。所以其他的then方法就不需要第二个回调啦~

控制并发的Promise

Promise有一个"静态方法"——Promise.all(注意并非是promise.prototype), 这个方法接受一个元素是Promise对象的数组。

这个方法也返回一个Promise对象,如果数组中所有的Promise对象都resolve了,那么这些resolve的值将作为一个数组作为Promise.all这个方法的返回值的(Promise对象)的resolve值,之后可以被then方法处理。如果数组中任意的Promisereject,那么该reject的值就是Promise.all方法的返回值的reject值.

很op的一点是:
then方法的第一个回调函数接收的resolve值(如上所述,是一个数组)的顺序和Promise.all中参数数组的顺序一致,而不是按时间顺序排序。

还有一个和Promise.all相类似的方法Promise.race,它同样接收一个数组,只不过它只接受第一个被resolve的值。

将其他对象变为Promise对象

Promise.resovle方法,可以将不是Promise对象作为参数,返回一个Promise对象。

有两种情形:

  1. 假设传入的参数没有一个.then方法,那么这个返回的Promise对象变成了resolve状态,其resolve的值就是这个对象本身。

  2. 假设传入的参数带有一个then方法(称为thenable对象), 那么将这个对象的类型变为Promise,其then方法变成Promise.prototype.then方法。

Promise是解决异步的方案吗?

最后说一点很重要的事:Promise的作用是解决回调金字塔的问题,对于控制异步流程实际上没有起到很大的作用。真正使用Promise对异步流程进行控制,我们还要借助ES6 generator函数。(例如Tj大神的co库的实现)。

然而ES7将有一个更加牛逼的解决方案:async/await,这个方案类似于co,但是加了原生支持。拭目以待吧。

文档

mozilla开发者文档


以上。一点微小的见解,谢谢大家。

浅谈ES6原生Promise相关推荐

  1. antvf2动态数据_浅谈ES6基础——Promise

    import { notification } from 'antd'; fetch(url, newOptions) .then(checkStatus) //checkStatus中主要是对res ...

  2. 浅谈es6 promise

    本文是借鉴于ac黄的博客. 接触es6也有几个月了,貌似没有系统的去学习过它,总是用到什么,查查什么.今天就说下es6中的promise对象. 先说说promise解决了什么问题? 写前端的同学都经常 ...

  3. 浅谈用原生 JS 模仿个Promise 的实现

    在尝试写一个 Promise 的时候,没有看任何的开源代码,我觉得这样遇到的问题才足够真实. 2018-05-15 11:10 目前只能做到这样: const Promise = function( ...

  4. 浅谈Generator和Promise原理及实现

    Generator 熟悉ES6语法的同学们肯定对Generator(生成器)函数不陌生,这是一个化异步为同步的利器. 栗子: function* abc() {let count = 0;while( ...

  5. js中 浅谈回调地狱 Promise之终极改造代码

    Callback helll Promise 异步编程的执行顺序都是不一样的,无法保证代码的顺序: 以下是读取三个文件 const fs=require('fs');fs.readFile('a.tx ...

  6. 浅谈云原生架构的 7 个原则

    简介:作为一种架构模式,云原生架构通过若干原则来对应用架构进行核心控制.这些原则可以帮助技术主管和架构师在进行技术选型时更加高效.准确,本文将就这些原则展开具体介绍. 作为一种架构模式,云原生架构通过 ...

  7. 浅谈ES6后的TDZ时间死区

    1.const.let和var 在es6新特特性这,let和const可以达到局部作用域的效果. 1.1 var var a = 4 function say () {console.log(a)va ...

  8. 何为用友云及浅谈云原生

    --------2021/10/8 目录 一.何为用友云: 二.Cloud Native:云原生 一.何为用友云: ​        用友软件是亚太本土最大的管理软件.ERP软件.集团管理软件.人力资 ...

  9. 谐云魏欢:浅谈云原生边缘计算框架演进

    近日,首届云原生边缘计算峰会(KubeEdge Summit 2022)于线上成功举办.现场,谐云资深技术总监.边缘计算负责人魏欢分享了云原生边缘计算框架的演进.从边缘计算框架的基本概念切入,详细讲解 ...

最新文章

  1. Kubernetes 网络排错指南
  2. Jmeter将HTTP request报文体中的字符串转换为大写
  3. Java的Runtime类介绍
  4. 温故而知新,UI学习中的大部分控件及常用的基础都整理了一下,很长~~~~~~~~~很长!!!!!!!...
  5. oracle分区表扩分区 很慢,升级oracle10g 大分区表update变慢
  6. html5+游戏+广告,给html5 游戏添加admob广告挣钱盈利
  7. CocoaPods通过网络代理执行资源更新
  8. Linux SO_KEEPALIVE属性,心跳
  9. 网站改造HTTPS有哪些好处?看很多网站都做了!
  10. 奇妙的 10^n + 1
  11. 数学之美系列好文,强烈推荐
  12. jQuery 三级联动
  13. redis key设计技巧
  14. FDTD Solutions自学整理笔记入门教程(2):PML
  15. 推断统计学 假设检验 显著性检验 第一类错误 第二类错误
  16. 潮阳实验学校文件服务器,【潮实】潮阳实验学校校歌(调教用)
  17. xp系统无法访问局域网计算机,xp拒绝访问| windows xp系统局域网拒绝访问怎么办...
  18. win10win11win7打印机连接共享错误0x00709打印失败错误修复工具
  19. Signal tap 逻辑分析仪使用教程
  20. 基于JAVA的远程屏幕监控系统

热门文章

  1. Linux01-Linux高级特殊权限SUID详解25
  2. 活用sersync实时采集日志
  3. Web跨浏览器进程通信
  4. New ADODB.Connection ADOX.Catalog 提示user-defined type not defined
  5. 网站静态文件缓存的处理
  6. 红帽收购混合云管理提供商NooBaa,混合云爆发节点临近!
  7. 剑指offer二之替换空格
  8. MySQL数据库的创建
  9. itop修改附件上传大小限制
  10. 第8章6节MonkeyRunner启动运行过程-启动Monkey 4