es6之promise被坑记

promise的介绍就不多说了。 

几个网址： 
http://es6.ruanyifeng.com/#docs/promise 
http://www.html5rocks.com/zh/tutorials/es6/promises/ 
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

接下来看怎么被坑的。 

先说说被坑的原因，主要是以前一直以为jQuery的deferred对象和promise是一样的api，所以一直没有深入研究，用jQuery也用习惯了，就一直放弃了promise的深入研究。

事实证明，浅尝辄止是可耻的，也是最容易被坑的。

代码1如下。

var error = true;
function test(){
//promise处理异步函数的回调，这里简单的用一个error代表正确结果和非预期结果的判断条件
var promise = new Promise(function(resolve,reject){
setTimeout(function(){
if(!error){
resolve("没错");
}else{
reject("有错");
}
},100)
});
//test函数内部处理非预期结果。
return promise.catch(function(error){
console.log("失败了:"+error);
});
}
test().then(function(str){
console.log("成功了:"+str);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

当error为false的时候，输出结果

成功了:没错

1
1

当error为true的时候，输出结果

失败了:有错
成功了:undefined

1
2
1
2

然后我就傻眼了，搞什么啊，为什么明明失败了，成功的回调还会被调用呢？ 

然后开始疯狂google。

看到一个答案是：

当catch函数里没有抛出新的error时，promise认为错误已经被解决。

天真的我以为找到了问题的根源，于是简单的改成代码2

var error = true;
function test(){
var promise = new Promise(function(resolve,reject){
setTimeout(function(){
if(!error){
resolve("没错");
}else{
reject("有错");
}
},100)
});
return promise.catch(function(error){
//没错，就是改了这里而已
throw new Error("失败了:"+error)
});
}
test().then(function(str){
console.log("成功了:"+str);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

然后重新运行,结果变成了

Uncaught (in promise) Error: 失败了:有错

1
1

这个 Uncaught是个什么鬼？明明前面不是要抛出异常么？为什么又来个没有catch? 

于是我开始怀疑我的写法的问题。 

又开始改成代码3：

var error = true;
function test(){
var promise = new Promise(function(resolve,reject){
setTimeout(function(){
if(!error){
resolve("没错");
}else{
reject("有错");
}
},100)
});
promise.catch(function(error){
throw new Error("失败了:"+error)
});
return promise;
}
test().then(function(str){
console.log("成功了:"+str);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

结果变成了：

Uncaught (in promise) Error: 失败了:有错
Uncaught (in promise) 有错

1
2
1
2

什么鬼？为什么改成这种写法以后又多出一个Uncaught。 

此刻的我彻底惊呆了。开始怀疑自己的世界观了，认为自己到底是有多不小心，肯定哪里哪里的写法写错了，然后重复看上面的三篇基础介绍里的例子，对照自己的写法，始终没发现问题。

到了这一步的时候，我彻底凌乱了，一度觉得这个promise是什么鬼东西，还不如jquery的deferred呢。手放在删除键上犹豫了很久要不要改回jquery的deferred对象。

还好最后我忍住了冲动，重新认真的看了介绍。 

总算明白了原因。

Promise是一种链式的回调，每一个then或者catch返回的是一个已经处理过的promise对象，同时catch只能catch之前链条中出现的错误。

那结合上面的那个说明，也就是说，我的catch函数因为是写在test函数内部的，所以它是这个链式回调的第一个环节，它只能catch promise的executor里的reject的分支，代码1中因为catch了reject分支，所以promise认为错误已经被处理了，自然会继续调用then的回调。 

而代码2中，因为在catch中重新抛出了错误，而在这个catch之后的then里没有做错误的处理，于是出现了Uncaught的错误提示。 

在代码3中，改了写法，return的是初始promise对象，所以实际上catch和then都属于第一链，在catch中因为抛出了新的error，故而出现一个Uncaught提示，而在then中没有定义reject的callback，且在then之后没有添加catch callback，所以会抛出第二个Uncaught提示。

问题总算找到了。 

于是正确代码应该是

var error = true;
function test(){
var promise = new Promise(function(resolve,reject){
setTimeout(function(){
if(!error){
resolve("没错");
}else{
reject("有错");
}
},100)
});
return promise
}
test().then(function(str){
console.log("成功了:"+str);
}).catch(function(error){
console.log("失败了:"+error)
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

也就是将代码1中的catch移到then的后面即可。运行结果也就成为了预期结果

失败了:有错

1
1

但是，问题是首先如果在之后再加入catch callback，根据前面的理论，下一个catch因为前面的reject已经被处理，所以第二个catch应该是不会运行的，那是不是意味着错误的回调只能写一次呢？ 

改成代码4

var error = true;
function test(){
var promise = new Promise(function(resolve,reject){
setTimeout(function(){
if(!error){
resolve("没错");
}else{
reject("有错");
}
},100)
});
return promise
}
test().then(function(str){
console.log("成功了:"+str);
}).catch(function(error){
console.log("失败了:"+error)
}).catch(function(error){
console.log("第二个回调："+error);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

结果为：

失败了:有错

1
1

果然，第二个catch没有运行。 

那如果我在这个之后再加入一个then呢？会有什么样的结果？ 

代码5

失败了:有错
第二个成功回调：有错

1
2
1
2

至此已经基本明白promise的链式规则了。 

1、每一个回调都接受上一个响应过的回调的返回值作为参数，代码5中，因为响应的是第一个catch callback，所以处理完错误后响应了第二个then的回调，而第二个then的参数则为第一个catch callback的返回值。如果error为false的话，第二个then的参数则变成了第一个then的返回值。 

2、catch函数只能catch在链条之前发生的reject，同时，浏览器的错误也会被认为是reject状态，且reject的内容为错误提示。

这两点jQuery的deferred是和promise的实现方法是不同的。 

jQuery的deferred的fail函数是有错误发生的时候就会响应，无论写在链式的什么位置。且，每一个callback的参数都为最初的resolve或者reject的值。

现在，回到最初我想解决的问题，如果我想要在test函数里统一处理reject，而test函数之外，只接受resolve的状态怎么实现？

要实现这个，其实也很简单，只需要保证catch不是在then之后就可以了，也就是将代码2里的throw部分改成处理错误既可。于是改成代码6

var error = true;
function test(){
var promise = new Promise(function(resolve,reject){
setTimeout(function(){
if(!error){
resolve("没错");
}else{
reject("有错");
}
},100)
});
promise.catch(function(error){
console.log("失败了:"+error)
return error;
})
return promise;
}
test().then(function(str){
console.log("成功了:"+str);
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

当我得意洋洋以为理解透彻了的时候，结果又让我吓了一跳

失败了:有错
Uncaught (in promise) 有错

1
2
1
2

什么鸟，为什么还有Uncaught的提示？ 

冷静想想，首先，Uncaught的意思是代表有reject状态没有被catch，那没有被catch的地方只有可能是在test函数外的then后面。按照前面的理论，代码6的写法里，catch完以后我返回了原本的promise对象，而原本的promise对象里reject的状态其实是没有catch的。所以才会出现Uncaught的提示。

这样一来，好吧，只能丢弃jQuery的deferred的影响。 

如果要在test里处理错误，就只能在异步的函数里进行处理，也就是将setTimeout的reject去掉，只留下resolve，然后每一个then都处理resolve，并且返回直接将参数作为返回值。

但是这样一来，在test外就没有办法再次调用错误回调了。

好吧，看来是我的要求比较绕，要求本身是和jQuery的deferred的功能是一致的。