Promise例子

前言：我看过沙漠下暴雨，看过大海亲吻鲨鱼，看过黄昏追逐黎明，没看过"你"；网上对于Promise的解释的文章很多，不过茫茫“文”海中，要找一个讲得好的，太难，而且还要找到一个自己这种水平能看懂的例子，更难，所以需要多方查证，然后自己总结一个适合自己能力水平看得懂的文章才行。（领悟出一个道理：打铁还需自身硬）

（好文章还是很多，但是我这边是带着完成一个功能的目的去学习知识的）

https://segmentfault.com/a/1190000002928371 这一篇公认的基础篇，对于快速入门来说很好，方便学习，例子也很简单易懂

http://www.cnblogs.com/huansky/p/5676978.html  这一篇是我觉得API介绍得很全的一篇，例子也很好

http://www.imooc.com/article/3627 这一篇不得不说是一个进阶篇，对于有一定的基础的人去学习这个收获肯定不少

http://blog.csdn.net/z69183787/article/details/60143576  async/await

 

tips:

  Promise主要是解决啥的呢？ 个人粗浅地认为：当我们有多个异步请求的时候，想在所有请求都成功的情况下再继续进行其他处理，我们一般的解决方法要么是自己定义一个计数器counter，当每完成一个请求counter++，这样就能判断是否完成所有请求，或者第二个请求在第一个请求成功后再进行.....其实阅读前面的推荐的文章你就知道Promise.all( )就能解决刚才这个需求；当然这只是其中一个例子。

我这边想实现的目的是：

jq的ajax配合promise对象，实现发送2次ajax请求，第二次是在第一次发送请求成功且底层返回状态为成功之后再发送；

原因：

在做SD卡格式化的时候底层要求是当SD卡在发送格式化命令后还需要发送一个挂载的命令，这样去实现的时候会出现回调嵌套，后面得知promise就是为了解决这种问题应运而生的，所以选择去学习一下。

下面是具体代码：（我这边没有介绍基础语法，直接上了撸代码，毕竟前面推荐了文章，所以当大家都懂了语法和基础知识）

如果是用原生的方法:

说明：这里是在WebStorm上进行测试（因为可以模拟一个服务器环境，方便我们使用ajax），我这边也简化了很多步骤，直接去请求一下example.txt这个文档，当获取到正确数据后再去请求第二个文档，也没有进行出错处理等等~~~不严谨

$.ajax({
        type: "post",
        url:"example.txt",
        success:function(data){
           if(data==1)
           {
            $.ajax({
                type: "post",
                url: "example2.txt",
                success: function (data) {
                    console.log(data);
                 }
               });
             }
          }
      }); 

下面是用Promise去做：

这边还用了settimeout去模拟了一下时延，因为在实际操作中请求数据的时候有可能没那么快，因为我测试的时候是在本地；

需要注意的是：

• then方法里面的回调函数是在这个Promise对象状态改变后调用的；

• 既然Promise可以链式调用，例如p.then( ).then()....这样，就意味着它肯定会返回一个Promise对象，如果我们在then中自己手动返回了一个数据，那么下一个then的回调函数中可以使用这个数据，但是这个then方法的Promise对象还是上一个对象，代表着上一个Promise对象状态改变了，那么我们如果p.then( ).then( )，里面的回调函数会一个接一个马上调用；如果我们是手动再返回了一个新的Promise对象，那么下一个then方法就是新的Promise中的对象的方法了，是代表新的Promise对象状态改变后的回调函数，而不是前一个，p.then( ).then( )这样调用的话，第二个then需要判断新的Promise状态是否改变才决定是否调用；

var p1 = new Promise(function (resolve) {
    $.ajax({
        type: "post",
        url:"example.txt",
        success:function(data){
            console.log("请求1")
            setTimeout(function(){
                resolve(data);
            },2000);
        }
    });
});

p1.then(function(data){
    console.log("请求1成功:"+data);
    if(data==1)
    {
        var p2= new Promise(function (resolve) {
            $.ajax({
                type: "post",
                url: "example2.txt",
                success: function (data) {
                    console.log("请求2")
                    setTimeout(function () {
                        resolve(data);
                    }, 2000)
                }
            });
        });
        p2.then(function(data) {
             console.log("请求2成功:"+data);
        })
    }
})

当然还可以换一种写法，其实也没差多少

var p1 = new Promise(function (resolve) {
    $.ajax({
        type: "post",
        url:"example.txt",
        success:function(data){
            console.log("请求1")
            setTimeout(function(){
                resolve(data);
            },2000);
        }
    });
});

p1.then(function(data){
    console.log("请求1成功:"+data);
    if(data==1)
    {
        return new Promise(function (resolve) {
            $.ajax({
                type: "post",
                url: "example2.txt",
                success: function (data) {
                    console.log("请求2")
                    setTimeout(function () {
                        resolve(data);
                    }, 2000)
                }
            });
        });
    }
}).then(function(data){
      console.log("请求2成功:"+data);
})