天天看点

实操ES6之Promise

写Promise的时候,自然而然会使用<code>箭头函数</code>的编写方式。箭头函数就是.Neter们熟知的lambda函数,已经被大部分主流语言支持,也受到了广大码农的交口称赞,但是Jser们却会遇到不大不小的一个坑。

众所周知,js函数中的<code>this</code>由调用它的上下文决定,我们还可以通过<code>apply</code>、<code>call</code>、<code>bind</code>等方式绑定上下文,从而改变函数中this的运行时指向。而当this遇到lambda时,又有所不同。

为什么会这样?网上很多分析,让人云里雾里。其实只要了解了——lambda与普通方法一个主要区别就是它能保持外层上下文变量的引用——这个特性就明白了。用lambda在方法内写过嵌套局部方法的.Neter很容易理解这个说法。

so,可以将js的箭头函数理解为受<code>运行时外层</code>影响的内嵌函数,它是在运行时赋值的——以上述js代码为例,js解释器解释Test.prototype的定义,解释到normal函数时,是不care其内部逻辑的,继续往下解释到lambda函数时,会过一遍其内部引用到的外部变量,若有则捕获用于真正执行时(所谓<code>词法作用域</code>)。此时这个this指的是运行环境的根对象(在浏览器中可能就是window对象),而不是test对象(此时还不存在噻)。注:本段为个人理解。

再看一个代码片段,请读者自行尝试分析下:

<code>Promise</code>主要是将原本的<code>callback</code>变为<code>then</code>,写出来的代码更便于阅读。有多种方式得到一个Promise对象:

<code>Promise.resolve()</code>:<code>Promise.resolve('foo')</code> 等价于 <code>new Promise(resolve =&gt; resolve('foo'))</code>

执行<code>async</code>修饰的函数:

如果async函数中是return一个值,这个值就是Promise对象中resolve的值;如果async函数中是throw一个值,这个值就是Promise对象中reject的值。

直接构造:

注意,构造Promise时内部代码已经开始执行,只是把<code>resolve</code>部分挂起放到后面执行。测试代码如下:

所以,这跟惯常认为的整个Promise代码块都后置执行不一样,需要注意。

我们可以如上述将回调逻辑写在then里,也可以将逻辑移到外层变为同步执行(而非后置执行),这就需要用到<code>await</code>关键字了,它将阻塞当前代码块,等待resolve块执行完再往后执行。代码如下:

ES6引入的Generator函数,是async/await的基础。

await让我们能用同步写法写出异步方法,但事实真的如此吗?在C#领域,这么说尚且没错。后端语言大多支持多线程和线程池,await虽然阻塞了后续代码的执行,但只是上下文被挂起,线程本身是不会被阻塞的还可以干其它事情,await返回后甚至还可以让其它线程接手,可参看本人以前的博文async、await在ASP.NET[ MVC]中之线程死锁的故事。js的话,它是单线程,而且它也不像go一样有完善的协程机制,无法手动(time.sleep()、select{}等)切换代码块执行——除非等到await返回,否则线程是没机会执行其它代码块的。 错误。

注意await挂起的不是线程,而是resolve上下文,推测本质上还是与js的执行队列相关,只不过await后续逻辑都排在resolve之后罢了。

但使用await时仍要注意避免不必要的等待,如果前后几个Promise没有依赖关系(更精确的说法是,任务的发起条件不依赖其它任务的结果),那么最好同时发起它们,并在最后<code>await Promise.all(promises)</code>。

很多文章都说<code>try/catch</code>在异步模式下无效,其实搭配await的话还是可以的(毕竟await可以使得回调执行在try块内),如下:

如果try的是整个testInvocation()那自然没戏。

如果觉得在每个异步方法内部try/catch太繁琐,那么可以抽离出一个模板方法,或者使用<code>process</code>对象注册<code>uncaughtException</code>和<code>unhandledRejection</code>事件,注意这两者的区别:

如果你使用electron开发桌面应用,可能无法[以<code>process.on('unhandledRejection', ...)</code>方式]捕获<code>unhandledRejection</code>异常(本人使用v10.1.0版本测试发现)。遇到这种情况,只能老老实实在每个Promise后面写catch()。

使用process捕获异常无法获取异常的上下文,且丢失上下文堆栈使得node不能正常进行内存回收,从而导致内存泄露。

node中还有个东西<code>domain</code>用于弥补process的问题,但是个人认为domain使用不便,且织入业务代码程度过深,另外据说目前版本还不稳定(后续可能会更改),甚至有文章说已被node废弃,具体什么情况暂未深入了解。总之希望node或者js平台能出一个关于异常捕获的更好的解决方案。

在js场景下,异步机制更类似于Go的<code>协程</code>(毕竟js是单线程,多线程无从谈起),所以此处取名为协程安全。

直接看代码:

由上可知:在使用await时,若多个await操作相同变量,并且它们的后续操作是在所有await都返回后执行,就容易出现与预期不符的情况,应尽量避免。

继续阅读