JavaScript Promise启示录_

《JavaScript Promise启示录_》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、JavaScriptPromise启示录_本篇，主要普及promise的用法。始终以来，JavaScript处理异步都是以callback的方式，在前端开发领域callback机制几乎深化人心。在设计API的时候，不管是扫瞄器厂商还是SDK开发商亦或是各种类库的，基本上都已经遵循着callback的套路。近几年随着JavaScript开发模式的渐渐成熟，CommonJS规范顺势而生，其中就包括提出了Promise规范，Promise完全转变了js异步编程的写法，让异步编程变得非常的易于理解。在callback的模型里边，我们假设需要执行一个异步队列，代码看起来可能像这样：viewsourcep

2、rint?1loadImg('a.jpg',function(){2loadImg('b.jpg',function(){3loadImg('c.jpg',function(){4console.log('alldone!');5});6});7});这也就是我们常说的回调金字塔，当异步的任务许多的时候，维护大量的callback将是一场灾难。当今Node.js大热，似乎许多团队都要用它来做点东西以沾沾“洋气”，曾经跟一个运维的同学谈天，他们也是准备用法Node.js做一些事情，可是一想到js的层层回调就望而却步。好，扯淡完毕，下面进入正题。Promise可能大家都不生疏，由于Promise规

3、范已经出来好一段时间了，同时Promise也已经纳入了ES6，而且高版本的chrome、firefox扫瞄器都已经原生实现了Promise，只不过和现如今流行的类Promise类库相比少些API。所谓Promise，字面上可以理解为“承诺”，就是说A调用B，B返回一个“承诺”给A，然后A就可以在写方案的时候这么写：当B返回结果给我的时候，A执行方案S1，反之假如B由于什么缘由没有给到A想要的结果，那么A执行应急方案S2，这样一来，全部的潜在风险都在A的可控范围之内了。上面这句话，翻译成代码类似：viewsourceprint?1varresB=B();2varrunA=function(){3

4、resB.then(execS1,execS2);4};5runA();只看上面这行代码，似乎看不出什么格外之处。但现实状况可能比这个简单很多，A要完成一件事，可能要依靠不止B一个人的响应，可能需要同时向多个人询问，当收到全部的应答之后再执行下一步的方案。最终翻译成代码可能像这样：viewsourceprint?01varresB=B();02varresC=C();03...0405varrunA=function(){06reqB07.then(resC,execS2)08.then(resD,execS3)09.then(resE,execS4)10...11.then(execS1);

5、12};1314runA();在这里，当每一个被询问者做出不符合预期的应答时都用了不同的处理机制。事实上，Promise规范没有要求这样做，你甚至可以不做任何的处理（即不传入then的其次个参数）或者统一处理。好了，下面我们来认识下Promise/A+规范：一个promise可能有三种状态：等待（pending）、已完成（fulfilled）、已拒绝（rejected）一个promise的状态只可能从“等待”转到“完成”态或者“拒绝”态，不能逆向转换，同时“完成”态和“拒绝”态不能相互转换promise必需实现then方法（可以说，then就是promise的核心），而且then必需返回一个p

6、romise，同一个promise的then可以调用多次，并且回调的执行挨次跟它们被定义时的挨次全都then方法接受两个参数，第一个参数是胜利时的回调，在promise由“等待”态转换到“完成”态时调用，另一个是失败时的回调，在promise由“等待”态转换到“拒绝”态时调用。同时，then可以接受另一个promise传入，也接受一个“类then”的对象或方法，即thenable对象。可以看到，Promise规范的内容并不算多，大家可以试着自己实现以下Promise。以下是笔者自己在参考很多类Promise库之后简洁实现的一个Promise，代码请移步promiseA。简洁分析下思路：构造函数

7、Promise接受一个函数resolver，可以理解为传入一个异步任务，resolver接受两个参数，一个是胜利时的回调，一个是失败时的回调，这两参数和通过then传入的参数是对等的。其次是then的实现，由于Promise要求then必需返回一个promise，所以在then调用的时候会新生成一个promise，挂在当前promise的_next上，同一个promise多次调用都只会返回之前生成