集成基于Promise的工具及Promise的用法_优品建站

集成基于Promise的工具及Promise的用法

  我们要解释一下最后一条规则“如果一个工具会返回Promise,那么你就不需要这个工具的插件”,以免你还没听说过Promise。总体而言,Promise是一种用同步的方法来处理异步结果的方法。听起来很难懂?好吧,也许是有点。先剧透一下:Promise可以非常好地集成到Gulp task系统中。这一章就会告诉你什么是Promise,以及它的用法。
一. Promise的用法
  在JavaScript中,异步操作和方法非常普遍。比如说处理事件、从服务器异步加载资源等等。这些计算有一个共同点:它们的结果不会立刻返回,而是会在将来某个时刻返回。
  Promise就是JavaScript里用来处理这种你暂时没有获取到的数据的方法。Promise顾名思义,就像是一个保证你最后一定会拿到数据的“承诺”。如果你最后拿到数据了,Promise的状态就是resolved或者fulfilled。但是如果Promise里发生了错误,你就拿不到数据了,这种情况下Promise的状态就是rejected(见图8-7)。

  图8-7 Promise的状态。当一个Promise刚刚创建时,它的状态是pending,意思是它异步计算的结果还没有返回。当它返回后, Promise的状态就变成resolved了。如果发生了错误,那就是rejected
  让我们看看如何用Promise的then把异步操作变得“thenable”。thenable的意思是你可以链式操作一堆函数,每个函数处理上一个函数返回的结果,一般是异步的结果。比如说要写一个数组求和的函数,那么原生数组方法reduce就足够了,它能把数组里的所有值reduce成一个。但是这样的代码是同步阻塞的。把它包裹在setTimeout里就能让它变成异步的,但是副作用就是需要回调才能处理结果。这种场景就非常适合Promise,代码如下所示。
代码清单8-11 Promise例子
  主要想法是把sum函数异步地执行[插图]。Promise接受一个回调函数作为参数。这个函数有另外两个函数作为参数:resolve和reject。当你创建了一个Promise,Promise的状态就是pending。把它包裹在setTimeout中能异步执行函数[插图],即使我们把timeout设为0也一样。这样一来就能保证一开始调用sum的主线程可以继续执行下去。
  sum返回一个Promise,也就是说你可以在结果暂时没有返回的情况下,继续执行代码。调用Promise的线程知道未来某个时刻你会拿到结果,并且知道你会在then中处理这个结果。图8-8展示了这行过程的时间轴。
  图8-8 Promise执行的时间轴。同步流程调用一个函数,这个函数返回一个Promise(1~2)。当这个函数执行的同时(2),你在同步流程就已经得到了Promise,可以处理结果了(3)。在某个时刻(4),Promise会resolved或者rejected,然后就会触发相应的下个步骤,或者出错
  还是接着上面那个例子。sum函数给你了一个Promise,通过这个Promise,你最后会得到结果;然后你就要处理这个结果。具体怎么处理,请看下面的代码。
代码清单8-12 调用sum函数
  Promise允许你链式执行一系列步骤,并且把异步返回的结果一个个传递下去。你应该对这个链式调用很熟悉了,它和你之前在流里面传递数据看起来一模一样。
二. 在Gulp task系统中使用Promise
  Promise的特性——链式异步执行任务,并且处理返回结果——让它完美适合Gulp task系统。gulp.task完全支持Promise。更棒的是,你已经在Gulpfile里用过它了。在第3章里,你用到了del模块。del不仅删除了文件,最后还返回了一个Promise,如下面的代码所示。
代码清单8-13 Gulpfile.js
  Gulp task系统不仅能处理流,还能处理Promise。结构都是差不多的:流要么会结束,要么会报错,类似于Promise的resolve和reject。
  在哪种task里Promise要优于流呢?Gulp流在处理和文件相关的东西时非常好,所以在不处理和文件相关的东西时,Promise或者基于Promise的工具就是一个不错的替代。举个例子:你想检查某个保存在package.json里Gulp插件是不是在黑名单中。
  Gulp把所有黑名单保存在GitHub的一个文件中。通过域名你可以获取到这个文件的内容。通过使用标准的fetch方法,你就可以得到一个Promise来处理返回的内容。然后,你就可以可以拿这个文件和package.json作比较,看看插件是否在黑名单中。图8-9展示了这一过程。
图8-9 Promise和then方法的使用。这个task和基于流的task非常类似
  下面的代码是具体的实现,我们使用node-fetch作为fetch方法的事件。Promise标准是Node.js 4.0的。
代码清单8-14 Gulpfile.js节选
  由于这是一个JSON,所以当你加载完后,会得到一个JavaScript对象[插图]。这个文件[插图]包括了所有黑名单中的插件。这里的Promise就是你从URL中将要获取的数据[插图]。这个函数[插图]也会返回Promise。这个调用[插图]是同步的,但是当你用then链式调用下一个函数时,你还是可以在函数里面使用上一个函数返回的结果。最后检查一下dependencies和devDependencies是否包含黑名单中的插件[插图]。
  这段代码有点长。不过,我们没有用任何Gulp插件,仅仅用基于Promise的工具创建了一个新的task。但如果你想处理并转换文件,或许还是流更合适。

  • 网站制作报价单模板适用多个行业(最新版)
    网站制作报价免费模板下载,可以应用于多个行业,也可以根据客户需求进行定制,内容详细,报价清晰明确,直接复制即可使用。
  • bootstrap网站制作案例实训——开发电商网站特效
    本案例使用Bootstrap进行网站制作的网格系统进行布局,其中设置了一些电商网站经常出现的动画效果。
  • 网站制作报价预算的明细报表下载,免费使用
    本文为大家提供网站制作报价预算的明细报表,内容包括网站制作原报价价格、根据客户要求进行修改、网站制作调整后报价,免费下载。
  • bootstrap被删除的Glyphicons字体图标
    本文单独介绍一下Bootstrap框架中的Glyphicons字体图标组件。Glyphicons字体图标指的是Glyphicon Halflings字体图标。我们在使用Glyphicons Halflings字体图标时一般是需要付费的,不过Glyphicons Halflings字体图标拥有者对Bootstrap授权可以免费使用。
  • 苏州网站制作报价,苏州网站建设价格
    苏州网站建立几钱,苏州网站制造的价钱规范,真的很重要、很迫切需求吗?当你散步市场时,你发现同一件商品在每一个摊位的报价都不同时,你能否在犹疑?这时你就是客户,你弄不分明终究花几钱购置该商品才是最合算,由于该市场没有标准。
  • Three.js网站开发指南:在单几何体上使用多种材质
    在创建THREE.Mesh时,到目前为止,我们已经使用过一种材质。为几何体的每个面指定不同的材质是可能的。
  • 网站制作报价明细模板免费下载
    本文详细介绍网站设计的报价,网站内容的报价,网站功能模块的报价,网站报价的注意事项。
  • html网页制作如何使用<audio>标签播放音频
    本文教大家如何使用<audio>标签播放音频,此功能在网站制作中应用非常广泛,代码简单移动,正文附带源码供大家学习参考。
  • 常见企业网站制作报价单模板下载
    本文提供的是常见的企业网站制作报价模板,适用于大中小多种不同行业的企业,仅供大家参考学习,可以在此基础上根据实际情况进行修改。
  • php经典案例:怎样才能得到阿姆斯壮数
    在三位整数中,如153可以满足13+53+33=153,这样的数被称为Armstrong(阿姆斯壮)数,试写出一程序找出所有的三位数Armstrong数。
  • 网站制作 服务

    免费网站制作报价,免费优化,1对1服务,个性化定制服务

    pc和wap网站制作

    多年建站经验,上千个成功案例,
    为您提供一站式服务

    网站维护改版

    大厂经验工程师对现有网站进行
    改版,修复,维护。

    小程序制作

    微信小程序,支付宝小程序,
    百度小程序

    响应式网页设计

    响应式网页设计可以与多种设备兼容,
    如智能手机,平板电脑和PC