kissy1.3的Promise精讲
promise规范(留意明河这里用的是规范一词,也就是说Promise模块不止是kissy有,像jquery、dojo等著名js库都有,都是规范的具体实现)在现代javascript编程具有非常大的现实意义,特别是在NodeJs中,建议大家阅读《JavaScript异步编程》1-3章的内容,如果亲懒得买书,明河推荐阅读二篇经典文章: 《Javascript异步编程的4种方法》和 《JavaScript异步编程的Promise模式》。
promise是commonJs的规范中的内容,目的是利用更为简洁良好的AP让异步处理过程更为通俗易懂,同时更为易用。
明河对promise价值理解是:promise消除反人类的多层回调嵌套,提高代码的可阅读性和可维护性。
promise典型场景应用
场景:需要发送三个异步请求,且三个异步请求存在依赖,写出来的代码可能如下:
KISSY.use('ajax',function(S,io){ io.get('1.json',function(result1){ io.get('2.json',function(result2){ io.get('3.json',function(result3){ }) }) }) })
“一不小心”亲就会写出这样的代码,然后请在深夜感受维护者的怨念….
多层嵌套回调是可维护性的大敌,反人类反自然,拿起promise,代表月亮消灭它们吧,少年~
来看下基于promise的改造。
KISSY.use('ajax',function(S,io){ io.get('1.json').then(function(result1){ //callback1 return io.get('2.json'); }).then(function(result2){ //callback2 return io.get('3.json'); }).then(function(result3){ //callback3 }) })
通过代码的比较,你就会发现,基于Promise的代码,回调的多层嵌套已经消失,代码顿时清爽了很多,这一切多亏了 then()
,代码更具有逻辑性,自然且方便理解。
(KISSY1.3的ajax模块继承于Promise.Defer()。)
再来看个 jsonp调用github api的demo,感受下Promise的用法。
Promise用法精讲
承玉曾写过一篇文章 promise api 与应用场景讲解了Promise的API设计。
明河这里主要讲解Promise的用法,相关API可以看 文档。
Promise模块共有二个类: Promise和 Promise.Defer。
假如Promise实例是岛屿的话,Defer实例就是岛屿间的吊桥,决定了Promise之间的链接和传递,来看个 最简单的demo。
KISSY.use('node,promise',function(S,Node,Promise){ var $ = Node.all; //实例化一个Defer,不用实例化Promise //Defer用于控制对应promise传递的成功和失败 var d = new Promise.Defer(); //promise是Defer的核心属性, 用于外部监听,传递成功/失败的函数 var promise = d.promise; //then方法第一个参数监听异步链成功流转到此的值,返回新的promise,并向下传递 promise.then(function (v) { return v + 1; }).then(function (v) { $('body').append('值为:'+v+',第二个then,值为第一个then中success回调的返回值。
'); }); //向异步链传值,并运转异步链 d.resolve(1); });
明河给代码加了详细的注释,请认真感受下promise api的使用。
(异步链是明河YY的名词,感觉比较切合promise的流转过程。)
首先创建Promise.Defer的实例:
var d = new Promise.Defer();
获取promise属性(为一个Promise实例)。
var promise = d.promise;
Promise有个核心方法: then(successCallback,failCallback)
,有二个参数:
- successCallback:监听异步链成功流转到此的值,返回新的promise,并向下传递
- failCallback:监听异步链失败流转到此的值,返回新的promise,并向下传递
大家想象下kissy中ajax的回调:
var ajax = io({ type: 'post', url:url, dataType:'json' }) ajax.then(function(result){ S.log(result[0]); },function(){ S.log('服务器故障,请求失败!'); })
then()起到承上启下的作用,接收刘转过来的数据,同时向下传递数据。
回到demo:
promise.then(function (v) { return v + 1; }).then(function (v) { $('body').append('值为:'+v+',第二个then,值为第一个then中success回调的返回值。
'); });
留意then回调的参数数据。
promise定义好了,并不执行,还需要Defer实例触发。
Defer有个resolve方法用于传递数据同时流转promise。
d.resolve(1);
promise打破多层回调嵌套的用法
先看下 多个setTimeout的demo,感受下。
假设setTimeout嵌套逻辑如下:
setTimeout(function(){ setTimeout(function(){ setTimeout(function(){ }) }) })
有人写过这么变态的代码么…
现在,我们需要基于Promise进行改造。
KISSY.use('promise', function (S, Promise) { var d = new Promise.Defer(); //向异步链传值,并运转异步链 d.resolve(1); var promise = d.promise; //在setTimeout外包裹个promise promise.then(function (v) { var d = new Promise.Defer(); setTimeout(function () { d.resolve(v + 1); }, 1000); return d.promise; }) //特别留意这里,success的回调会等到上一个promise成功传递值到这里时触发 .then(function (v) { alert('第二个then执行,异步链传到这里的值为'+v); }); });
这个demo会比上一个复杂。
关键的代码是:
promise.then(function (v) { var d = new Promise.Defer(); setTimeout(function () { d.resolve(v + 1); }, 1000); return d.promise; })
then()可以返回个其他定义的Promise实例,一样可以保证异步链的流转,当内部定义的Defer,执行resolve(),后续的异步逻辑才往下执行。
组件继承于Promise
Promise切实地改变了异步组件的API,让用户更方便的demo。
典型的异步组件,像ajax和uploader。
严重建议大家,如果你写的组件是有异步逻辑的,请继承Promise,像下面的代码:
KISSY.add(function(S,Promise){ function IO(c) { var self = this; Promise.call(self); } S.mix(IO,{ _defer: new Promise.Defer(this) }) S.extend(IO, Promise,{ _ioReady:function(){ //成功获取数据后 var defer = self._defer; defer[isSuccess ? 'resolve' : 'reject']([self.responseData, statusText, self]); } }); return IO; },requires:['promise'])
总结
promise,是前端必须掌握的特性,严重推荐在日常编码中使用起来,改造下你的ajax代码,免得被人骂土鳖哦。