Promise 基础使用指南

Promise 作为 ES6 最重要的特性之一。用于一个异步操作的最终完成(或失败)及其结果值的表示:即处理异步请求。我们经常会做些承诺,如果我赢了你就嫁给我,如果输了我就嫁给你之类的诺言。这就是 Promise 的中文含义:诺言,一个成功,一个失败!

1.Promise 构造函数

一般来说 Promise 对象会作为函数的返回值进行调用,它具有两个参数 resolve 与 reject。我们可以这样封装

Promise 是一个构造函数,具有3种状态分别为pending、resolved、rejected。它接受一个回调函数作为参数,并传入两个参数 resolve 与 reject。分别表示异步操作执行成功后的回调、与异步操作失败的回调。reslove 将 Promise 的状态设置为 resolved,reject 是将 Promise 的状态设置为 rejected (这2个参数其实是 Promise 本身的闭包函数)。

2. then() 与 catch()

包装好函数后,会 return 出 Promise 对象。我们就能把原来的回调写法分离出来、在异步操作执行后按不同的状态进行链式的调用执行回调函数。

我们来尝试一下,取一个随机数:

进行调用时,catch 方法与 then 方法几乎相同,为 rejected 的回调。而且 catch 具有捕捉异常并处理的机制,这一点将非常好用,类似 try/catch。

比如我们在执行 getNumber() 时同时打印一个不存在的变量:(虽然 then 中可以传第二个回调函数参数作为 reject 的回调,但通常推荐放在 catch 的回调中)

then 和 catch 这对基友不仅能互相配合,then 甚至可以去返回另一个 Promise,并且共享一个 catch 的回调,形成一套异步任务队列,从而优雅地处理回调:

封装好异步任务后,进行链式调用:

3.all() 与 race() 并行执行异步任务

Promise 为并行执行提供2个函数 all() 与 race(),它们接受一个 Promise 为元素的数组作为参数。它们虽然都是用于并行执行,但它们的 resolve 回调中的 result 则有区别,all 中你可以处理所有的返回数据,而 race 中你只能处理最先返回的返回数据。

有一个场景是很适合使用 all 的,比如游戏类素材较多的应用,初次打开时预加载需要用到各种资源:如图片、flash 以及其他静态文件,所有的资源都加载完后,我们再进行页面的初始化。

all 方法的效果实际上是“谁跑得慢,以谁为准执行”,那么 race 则是“谁跑得快,就执行谁”,race 用法几乎等同于 all

4.串行执行队列事件

Promise 中其实已经有串行执行的方法,也就是 then() 链的不断传递。但是这种方法有时可能不是你最想要的,比如我们无法手动封装每一个事件,或是事件的数量不确定。我们可以将这些返回 Promise 的 function 放入同一个数组,使用 Array.reduce 这个函数,但这是个非常糟糕的做法!

比如我们需要 Async 函数接受某些动态的参数时,如 index,我们为了参数的传递会需要用到闭包。并且这个 reduce 完全没有任何异常的捕获能力,队列只是按照我们预先假象的 then 链执行,就连最后的 catch 都是徒劳,因为只有最后我们才使用了 Promise.resolve() 去连接下方的 catch。

或者是这样:

类似的递归操作或者是队列操作,不仅很难读懂,而且存在很大的隐患!

如果需要,确实可以二次封装请求方法,在请求失败的时候调用 reject,但那样不仅会用到闭包,也需要给所有的事件绑 catch,它们不能再使用同一个 catch 处理 rejected 了。当然,代码实现肯定不是上图那么简单(根据业务需求各不相同,这里就不贴图了)。

既然如此麻烦,那么就用一种方便快捷的解决办法吧!这时候,就需要 es6 的新语法:aysnc、await

是不是简洁了很多呢?同时提升了可读性,不过这颗语法糖底层其实也是闭包与 Promise 配合实现的 ,关于 async、await 这里小A就不在本篇文章中赘述了,今后如有遇到特别好的例子也会配合案例分享。

5.结尾

异步操作在前端可谓是非常重要的一环,上文介绍的 Promise 都是比较基础的使用 demo ,在封装 web API 的请求时,往往还需要更多的考虑。在特别复杂的异步业务逻辑时,如果你接触过或熟悉观察者模式,选择RxJS是一个非常不错的决定,当然它本身也是特别庞大的。

本文代码片段来源自小A的 Github 中Promise-ES6项目。

https://github.com/August-Z/Promise-ES6

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180328G1VTOE00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券