JavaScript Promise API

Promise是抽象异步处理对象以及对其进行各种操作的组件。
本文将会详细的向你介绍如何在JavaScript中借助Promise来简化异步代码流。

背景知识

JavaScript是单线程的,这意味着代码是按顺序执行的。对于浏览器而言,JavaScript代码和其他任务共享一个线程,
不同的浏览器略有差异,但大体上这些和JavaScript共享线程的任务主要包括重绘、更新样式、用户交互等,
所有这些任务操作都会阻塞其他任务。

避免事件阻塞的常用方法是使用事件监听器。我们可以为某些特定事件设置监听器,如果事件发生的话,便立刻触发监听器,
你应该已经习惯使用回调函数来解决这个问题了,例如:

上面的代码中,我们添加了两个监听器,请求图片,回调函数只在事件发生的时候才会被触发。但是通过事件机制还存在几个问题:

  1. 事件在绑定之前就发生了怎么办?
  2. 在添加监听器之前,图片加载发生了错误怎么办?

仅仅是一张图片就存在这么多问题,那么如果有一堆图片要处理,又该怎么办?下面我们就谈谈Promise,一个越来越流行的异步解决方案。

Promise

JavaScript的一大特点就是会涉及到大量的异步代码。同步代码通常易于理解和调试,而异步代码则具有更好的性能和灵活性。
目前Promise正逐渐称为JavaScript世界的一个重要组成部分,并且很多新的API也都基于Promise进行了实现。
目前已经有一些原生API使用了Promise,包括:

什么是Promise

那么到底什么是Promise呢?Promise是ES6规范新增的对象,它可以用于延迟计算和异步计算。
一个Promise对象代表着一个还未完成,但预期会完成的操作。需要记住:

  • 一个Promise要么成功要么失败,并且状态不可变
  • 可以根据Promise的结果设置特定的回调函数

Promise的状态

一个Promise的状态可以是:

  • 等待 pending – Promise的初始化状态,等待结果
  • 完成 fullfilled – 该Promise对应的异步操作成功完成了
  • 失败 rejected – 该Promise对应的异步操作失败了
  • 结束 settled – 任务完成或失败了

基本使用

new Promise()构造器应该只被用于传统的异步任务上,例如setTimeoutXMLHttpRequest
通过new关键字创建一个新的Promise,它接收一个回调函数作为参数,该回调函数又包括了两个特定的回调函数,
分别被命名为resolvereject,成功后调用resolve,失败则调用reject

根据不同的任务,由开发者来决定resolvereject在函数体内的位置。

使用Promise则非常的简单,可以调用Promise对象的then()方法来处理异步计算的结果。then接收两个回调函数,
分别是成功的回调函数和失败时的回调函数,这两个参数都是可选的。

Promise的使用有两点需要记住的:

  1. then()方法可以链式调用
  2. catch()方法可以作为错误处理语句的语法糖,相当于then(undefined, function(error) { ... });

在具体讲解这两点之前,我们先来看一个例子。下面这个例子用于将XMLHttpRequest转换为一个基于Promise的接口。
我们以GET请求为例:

我们现在可以这么调用它:

现在我们发起XHR请求便变得简单直观的多了。story.json文件的内容如下:

Promise.resolve

有时你无需在promise内完成一个异步任务——如果一个异步动作被执行是可能的话,然而,返回一个Promise是将是最合适的,
因此你可以总是期望从给定函数中产生的promise。在这种情况下,你可以简单的调用Promise.resolve()或者Promise.reject()
而无需new关键字。例如:

由于返回的是一个Promise,你可以在返回值上使用thencatch方法。
可以将Promise.resolve看作是new Promise()的快捷方式。

链式调用

上面我们说过then()接收两个参数,分别对应成功和失败时的回调函数。我们还可以将多个then方法串联起来,
用于修改结果或执行更多的异步操作。

你可以对结果进行修改,然后返回一个新的值,例如:

每个then接收前一个then的返回值的结果。

回到之前的get函数,我们可以修改返回值的类型,将结果进行一定的转换:

为了让代码变得更简单,可以再次进行改进:

  • 因为JSON.parse只接收一个参数,并返回转换后的结果,我们可以直接使用then(JSON.parse)
  • then中的回调函数,我们可以直接使用ES6的胖箭头函数,这样可以让代码更直观

由于这段代码会被重复调用,我们可以定义一个新的getJSON函数:

对于串联起来的then()方法而言:如果你返回了一个值,那么它就会被传给下一个then()的回调。
如果你返回一个“类Promise”对象,则下一个then()就会等待这个Promise明确结束(成功/失败)才会执行。

在上面的代码中,我们首先发起对story.json的异步请求,它会返回给我们一个URL列表,然后我们请求其中的第一个,。

错误处理

前面我们已经知道,then接收两个参数,一个处理成功时的回调函数,一个处理失败时的回调函数。

你还可以使用catch来进行错误处理,实际上,它不过是then(undefined, func)的语法糖而已。这样能够让代码更直观:

并行和串行

异步意味着你不用等待前一件事情做完就可以做后一件事。现在,我们想要遍历所有章节的URL并且依次请求,应该怎么办?
使用传统的方法,你可能会想到array.forEach

但是这么做并不可行,因为forEach不支持异步操作

Promise序列

上面的代码中使用了Promise.resolve(),它会依据你传入的任何值返回一个Promise。
如果你传给它一个类Promise对象(带有then方法),它会生成一个带有同样肯定/否定回调的Promsie。
如果你传给它任何别的值,如Promise.resolve('hello'),它会创建一个以该值为完成结果的Promise
如过不传入任何值,则以undefined为完成结果。

reduce回调会一次应用在每一个数组元素上,第一轮的sequencePromise.resolve()
之后的调用里sequence就是上次函数执行的结果。reduce()方法非常适合用于把一个值归并处理为一个值。

Array.prototype.reduce(callback, [initialValue])方法接收一个函数作为累加器,数组中的每个值(从左到右)开始合并,
最终为一个值。参数二作为第一次调用callback的第一个参数。此外,callback包括四个参数:

  • previousValue – 上一次调用回调返回的值,或者是提供的初始值(initialValue)
  • currentValue – 数组中当前被处理的元素
  • index – 当前元素在数组中的索引
  • array – 调用reduce的数组

汇总前面的代码为:

辅助方法定义如下:

Promise.all

浏览器很擅长同时加载多个文件,上面的方法属于一个接一个下载章节,这先得非常的低效。我们希望同时下载所有章节,
全部完成后一次搞定,正好就有这么个API:

Promise.all接收一个Promise数组作为参数,创建一个当所有Promise都完成之后就完成的Promise,它的完成结果是一个数组,
包含了所有先前传入的那些Promise的完成结果,顺序和将它们传入的数组顺序一致。

根据连接状况,改进的代码会比顺序加载方式提速数秒,甚至代码行数也更少。章节加载完成的顺序不确定,
但它们显示在页面上的顺序准确无误。

但仍然有改进空间:第一章内容加载完成后,我们向让它立即填进页面,这样用户可以在其他加载任务尚未完成之前就开始阅读。
当第三章到达的时候我们不动声色,第二章也到达之后我们再把第二章和第三章内容填入页面,以此类推。

为了达到这个效果,我们同时请求所有的章节内容,然后创建一个序列依次将其填入页面:

References

  1. JavaScript Promise API
  2. JavaScript Promise: There and Back Again
  3. Promise迷你书
  4. MDN: Promise
1 4 收藏 1 评论

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部