此文章同步发表在我的博客：我的博客
前言
在js领域，promise出现的时间已经很久了，从jquery的$.get().done().fail() 这样的API开始，到现在的es6默认支持的new Promise(),它的出现无疑使异步代码变得信任可靠，更使得前端代码的信任度直线提升，就跟它的名字一样，它的到来，是一个 Promise (保证，允诺)
异步信任问题
有一个朋友在银行系统工作，有一次，我帮他review一段代码，据他所说，这段代码给他带来了一个很大的麻烦，有一位顾客使用这个页面付款的时候意外的提交了两次付款请求，boss复查发现提交的源头是前端，当我接到这段代码的时候，这位朋友已经焦头烂额，我接过了代码， 初步分析，什么也没发现，他的代码就像下面这样：
$("btn").on("click",function(){
if($(this).hasClass("no-submit")){
$(this).removeClass("no-submit");
//忽略
$.ajax({
url:"....",
type:"json",
success:function(){
submit();
}
})
}
})
他告诉我，他已经针对按钮做点击唯一提交了，怎么可能调用两次？
但是事实就是有两次submit。
通过分析代码，最后排查的结果，原因是这个jquery的$.ajax是被二次封装过的，某种情况下回调函数被调用了两次。
oh，看起来很简单的原因，这可是个巨坑！ 日常代码中，我们都需要接触各种各样的第三方库，谁来保证它们都没有隐藏的问题？如果你遇到了经过加密混淆的库，因为它内部某个try catch，或者内部某个if在非正常情况下发成的误判导致重复调用，我想你就不会再淡定的喝着咖啡敲代码了。
或者你觉得，防止重复调用这个很简单，加个判断就行了：
var a = 0;
$("btn").on("click",function(){
if($(this).hasClass("no-submit")){
$(this).removeClass("no-submit");
//忽略
$.ajax({
url:"....",
type:"json",
success:function(){
if( a==0){
submit();
}
}
})
}
})
完美是吧，测试上线，继续喝咖啡。
三个月后。。。。。
有些顾客反应，点击提交后，有时没有提交成功，老板这时大发雷霆，这已经是第二次出现这样的失误了。
是的，只调用一次，但是鬼知道它会不会调用一次？
这里问题的本质是什么？
它就是所谓的回调地域。
我们总是有很多的回调函数需要交给第三方工具处理，类似于$.ajax，jquery就一定是值得信任的？图样图森破！你永远不知道jquery下面可能还埋着上一位开发者给你准备的周年大礼包。最糟糕的是，这个第三方工具你没有修改的能力，要么你换掉他，要么你解密，要么换版本，谁知道作者会不会继续更新？
把我们的回调交给不受信任的第三方程序，这就是回调地域，可怕的很！
Promise调用方式
今天的主角是promise。它可以让我们的回调变得promise。
试想，我们把上述的ajax再次封装（在不能改动源代码的情况下），可能代码如下：
var then = function(resolve,reject,timeout){
var a = 0;
$("btn").on("click",function(){
if($(this).hasClass("no-submit")){
$(this).removeClass("no-submit");
//忽略
$.ajax({
url:"....",
type:"json",
success:function(){
a==0&&resolve();
a++;
},
error:function(){
a==0&&reject();
a++;
}
})
}
})
if(new Date.now()>timeout){
a==0&&reject();
a++;
}
}
var a = 0;
ok，我只是将前面的代码封装到一个叫then的函数里，这个函数需要三个参数，resolve(解决),reject(拒绝),以及一个超时时间，另外控制调用次数的变量a也有保留。
有什么不同?
不同之处在于，then函数是可信任的，至少现在我们可以确定，它要么被resolve，要么reject，绝不可能出现调用两次，或者不调用的情况。这种封装可以叫做控制反转，
我们将原本给到$.ajax的回调权再次交回自己手中，上面的代码调用起来是这样的：
then(function(){
submit()
},function(){
error()
})
ok,我们只解决了其中的一些问题，重复调用，不调用，但还有更多的问题。
让promise登场吧！
使用promise封装上面代码：
function request(){
return new Promise(function(resolve,reject){
$.ajax({
url:"....",
type:"json",
success:function(){
resolve()
},
error:function(){
reject()
}
})
})
}
request.then(function(){
submit();
},function(){
error();
})
ok，是否豁然开朗？
promise就是解决关于异步回调信任，顺便缓解了回调金字塔（一堆回调嵌套在一起，就是一个回调金字塔）问题的解决方案。
在这个Promise构造函数中传入一个函数，这个函数有两个值，resolve、reject。一旦代码请求成功，resolve被调用，决议完成并忽略后面的所有调用。或者失败后决议被拒绝，调用reject。
决议、解决、拒绝术语
一个promise通常有三种状态 pending（进行中）、fulfilled（已成功）和rejected（已失败）。
可以说在任何情况下，一个promise只有一个决议。 它只可能是fulfilled或者rejected其中一种，并且是不可以逆转的。意思是你无法让一个已经被拒绝的promise回滚。它永远都会有一个确定的回复。
Promise API
promise.all(Array);
Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例，并且这个新的promise返回的最终值是传入的多个Promise决议完成的值。
有了Promise.all方法，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加简单易懂。
像这样的调用：
Promise.all([request("url1"),request("url2")]).then((result)=>{
console.log(result) //[url1result,url2result]
})
注意传入的顺序，数组promise决议的值与返回的result数组位置是一致的。对于以往的回调方式来说，这是很强大的api。
Promise.race(array)
这个方法和all调用方式一样，但是决议的方式不一样,.all等待所有决议完成新的 Promise返回决议。 而.race，一旦有某个promise决议完成，其余的会立刻终止。也就是说它只会执行最快的那个promise。
阮一峰的博客…更多api可以查看阮大大的es6教程
结束
promise已经成为主流。我在这里只讲了一些浅见，至于更多的用法，与君共勉！
