本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！

帮你理清学习一个知识点的过程

什么是异步操作？

所谓异步操作，指的是可以跟当前程序同时执行的操作。举例:

$("#page").scrolltop(0 ,1000);    //使用1秒钟时间将页面滚动至顶部

$("#nav-float").hide (1000);    //使用1秒钟时间将悬浮导航栏隐藏

只要你稍微有点异步编程经验，就应该知道，这两个方法会同时完成。

它们的编写顺序并不会影响它们的执行顺序

//异步操作的特点就是，不会打断当前程序的执行

//getUsers请求发出后，会立刻向下继续执行第二个请求

ajax("/getUsers",function(data) {

      //回掉函数会在请求成功后调用

})

//resumelist请求会立刻开始，无论getUsers是否结束

ajax("/resumelist", function(data) {

})

//至于哪一个ajax先返回结果并执行回调函数，从代码的编写顺序上是无法确定的。

我们可以给异步操作做一个简单的定义

我们常见的异步操作例如：

异步会带来什么问题？

比如我们现在有两个动画，需要按顺序来执行，也就是第一个结束，第二个才能开始

这个时候可能有点麻烦，传统的解决方法是通过回调：

animateA(function( ){

      animateB( );     

})       

这种方案显然不太好，如果有很多异步操作需要顺序执行，就会产生所谓的“回调地狱”

ajaxA(function( ){

      ajaxB(function( ){

             ajaxC(function( ){

                    ajaxD(function( ){

                           ......      

                    });     

             });     

      });     

})     

这种代码不管是写起来还是读起来都比较烦人。 我们来看下经过Promise改造后的样子（伪代码）

new Promise(ajaxA)

        .then(ajaxB)

        .then(ajaxC)

        .then(ajaxD);     

Promise的使用及原理

要熟练Promise的的使用，你必须要先搞懂它解决问题的原理

贴一段实际的Promise代码，你来感受一下先：

newPromise(resolve=>{
      ajax("/pay/post", data=>resolve() );
}).then(resolve=>{
      ajax("/order/fix", data=>{
            //处理数据   
      })
})

上面的代码使用了 ES6 的 箭头函数,虽然大大简化了代码的写法，但对于初级程序猿来讲极不友好

读这种代码简直跟读金刚经差不多。我们把代码还原成ES5的样子

new Promise(function(resolve){
      ajax("/pay/post",function(data){
            resolve();
      })
}).then(function(){
      ajax("/order/fix",function(data){
            
      })
})

接下来，我们就按照费曼技巧来一步步的学习Promise是如何解决问题的

Promise并没有那么神奇，它并不能知道我们的函数什么时候结束，你注意到上面代码中的第3行了吗

在ajax请求结束执行回调的时候，我们调用了一个resolve()函数，这句代码非常的关键.

这其实就是在通知Promise，当前这个函数结束啦，你可以开始执行下一个。 这时Promise就会去执行then里面的函数了。

Bingo!! 恭喜你已经学会了逻辑推理+抢答。

你得先弄明白Promise的基本结构

new Promise(函数1).then(函数2);

我们把函数1和函数2都以参数形式传给了一个Promise对象，所以接下来函数1和2都会由这个Promise对象控制， 简单的说，函数1和函数2都会由Promise对象来执行。 所以在函数1执行时，参数也当然是由Promise对象传递进去的。

new Promise(function(resolve){       //resolve是Promise对象在调用函数时传入的参数}).then(函数2);

你说呢？

废屁，知道还用问你？

真是猪脑子，刚才不是已经说了吗？ Promise对象没办法知道我们的异步函数啥时候结束。那我来问你， 如果你去车站接人，可是你又不知道对方何时下车，你会咋办？

把我电话号码给他，快到了打我电话呗

没错，Promise解决问题也采用了同样的思路。它传进来的 resolve 函数， 就好像一个对讲机，当我们的异步任务要结束时，通过对讲机 来通知Promise对象。也就是调用 resolve 方法

new Promise(function(resolve){
      ajax("/pay/post",function(data){
            //当请求结束时，通过调用resolve方法，通知Promise对象，该任务已完成
            resolve();
            //收到通知后，Promise会立刻开始函数2的执行
      })
}).then(函数2);

懂了，所以这个resolve函数，必须在异步任务的最后调用(例如ajax的回调方法)，相当于告诉Promise对象，该任务结束，请开始下一个。

完全正确

基本是这样的，但Promise带来的编码方式以及异步编程思路上的进步是非常巨大的。

不行

靠！ 我还没说呢！

那你说

如果我这样写呢？

new Promise(function(resolve){
      ajax("/AAA", function(){
            resolve(); //通知Promise该任务结束
      })    
}).then(function(resolve){
      ajax("/BBB", function(){
            resolve();//通知Promise该任务结束
      })
}).then(function(){
      ajax("/CCC", function(){ //.... })
})   

上面的这种写法是不对的。 Promise的中文含义是“承诺”，则意味着，每一个Pormise对象，代表一次承诺

而每一次承诺，只能保证一个任务的顺序，也就是说

new Promise(A).then(B); 这句话表示， 只能保证 A 和 B 的顺序。

一旦 A 执行完，B 开始后，这次承诺也就兑现了，Promise对象也就失效了

那如果还有C呢？ 我们就必须在函数B中，重新创建新的Promise对象，来完成下一个承诺，具体的写法就像这样：

new Promise(函数1(resolve){
      ajaxA("xxxx", function(){
             resolve();//通知Promise该任务结束
      })    
}).then(函数2(){
      //在函数2开始运行后，第一次创建的Promise对象完成使命，已经不能再继续工作。
      //此时，我们创建并返回了新的Promise对象
      return new Promise(function(resolve){
             ajaxB("xxxx", function(){
                   resolve();//通知新的Promise对象该任务结束
            })    
      })
}).then(函数3(){ //尽管这里使用了链式调用，但负责执行函数3的，已经是新的Promise对象了
      
       // 如果，我们还有ajaxD需要顺序调用
       // 那就必须在这里重新new Promise()对象了
      ajaxC("xxx", function(){     })
})  

有啊，例如： 如果我有 A , B , C 三个异步任务，ABC同时开始执行

当A,B,C三个任务全部都结束时，执任务D，传统方法实现起来就比较复杂，Promise就非常简单，就像这样：

Promise.all([new Promise(A), new Promise(B), new Promise(C)]).then(function(){     D();});

Promise.race([new Promise(A), new Promise(B), new Promise(C)]).then(function(){     D();});

恭喜你，在这么短的时间内学会了Promise