📢📢📢 阿里云双十一,赠送您一张全场8折折扣优惠券

📢📢📢 2核2G3M的服务器,99元一年,新老用户续费同享!!

js异步编程解决方案之promiseA+规范

promsieA+是由promiseA演化增强来的,为了解决js异步回调层次过多代码,造成结构混乱难以理解的这个问题的,之前用过when.js 还有Q。Q是用在nodejs端的库,when也可以用在浏览器端,但是要重新build,我是在浏览器端用的,体积有点大啊,就作为尝试而已。

先来看一段代码感受回调之力

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var log = console.log.bind(console);
function first (cb) {
setTimeout(function () {
if (cb) cb("data 1111");
},1000)
}
function second (cb) {
setTimeout(function () {
if (cb) cb("data 22222");
},1000)
}
function third (cb) {
setTimeout(function () {
if (cb) cb("data 33333");
},1000)
}
first(function (data) {
log(data)
second(function (data) {
log(data)
third(function (data) {
log(data)
});
});
});

这个 三层的回调。。。。额。。挺好。。。然后再来感受一下这个

某长达十个的连续回调这个是滴滴某打车的官里的某js文件。。。。。。。我。。。

如果采用 promiseA+ 的方式 就是这样的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function first () {
var promise = new Promise();
setTimeout(function () {
promise.resolve("data 1111");
},1000);
return promise;
}
function second () {
var promise = new Promise();
setTimeout(function () {
promise.resolve("data 22222");
},1000);
return promise;
}
function third () {
var promise = new Promise()
setTimeout(function () {
promise.resolve("data 33333");
},1000);
return promise;
}

first().then(function (data) {
log(data);
return second();
}).then(function (data) {
log(data);
return third();
}).then(function (data) {
log(data);
});

就是把原来的三个函数修改了一下,然后就可以看到这个类似链式的调用的,看了是不是很爽。这里出现了一下 Promsie 这个类。 于是乎,这个规范其实就是为这个类做了一下规范。这个规范的原文在这里 promiseA+ ,虽然说是以promiseA为基准的,但是并没有找到相关的文档之类的,一查全都是promiseA+ 的。这个文档的翻译有很多,但是都看的不明不白的,于是就自己去看原文翻译一下。这个翻译还是没有什么压力的。这个规范主要是定义了 then 这个方法及其参数还有各种行为,超级复杂。最后还是有几点看不明白。虽然平时用的时候是挺好用的,但是这个文档看了确实头疼。于是翻译的时候就按照自己理解的东西,把主要的东西翻译出来,并没有与原文对应翻译在这里 

关于如何按照规范实现一个promise,官方有个实现 promiseJS ,它这个就复杂了,完全看不懂,也看不出规范的内容,于是自己就实现了一下,很多坑,learnPromiseAPlus。基本上功能都实现了,还有关于测试的东西也有一些说明。