浅谈ES6之promise 实际开发中的使用（一）

一：promise是个什么鬼？

　　1.1：说起promise这个玩意，首先呢，我们来讨论一下什么叫做＂异步＂而于此相反的呢就是＂同步＂呢，好，那下面让寡人给大家举个例子来讲明白什么是同步什么是异步.    

            1.1.1:同步

　　　　同步就比如你和你刚刚谈恋爱的女朋友（非常苛刻，她要求你在买衣服的时候不能做别的事情）去买衣服，你要一直的陪着她去挑选衣服，哦，好了，朋友你一定是历经了时光的冗长，但你在这期间不能去做别的事情，好嘛，你就得一直等着你女朋友把衣服买上了付了钱，然后你轻声的对她说＂我们可以宾馆了＂，朋友你终于可以进行宾馆的操作了．所谓的同步的概念就是在一件事情还没有处理完你是不能继续做下面的事情喽．

　　　1.1.2：异步

　        呀，异步就好理解了，假若你的女朋友很温柔，看见你陪着不耐烦的时候，她告诉你＂我挑选衣服吧，你可以在附件给咱看看那个宾馆好，等，我买好了衣服我给你打个电话，然后咱们可以呢个呢＂，然后你怀着中了五百万的大奖的心态屁颠地去定你宾馆了．然后她买好了衣服并给你电话通知了，你也订好了你的宾馆．那么异步就理解为你的代码执行到了某些方法的时候，我们并不的选择等待该方法的完成返回结果，我们继续执行我们的代码，只要她执行完毕了，有了返回的东西，好，那她就通知我们，这个通知某种程度上就是javascript所说的回调呢．

　　　1.1.3：javascript中的同步和异步

　　　概念：同步编程，即是一种典型的请求响应模型，当请求调用一个函数或者方法之后，需要等待其响应的返回结果，然后才可以继续执行代码.异步,即是一种事件驱动编程，异步编程，即是一种事件驱动，当请求调用一个函数或者方法之后，不再需要等待其响应的返回结果，并继续执行代码，知道该方法或者函数响应返回的时候，通过状态或者通知或者回调来通知调用者．

1.2：promise 天马行空，主要是要腰马合一呀兄弟们．

　　　1.2.1：promise这是个啥呢．听我道来哈

　　　promise简单的来说就是为了处理上述的异步而产生的一个龟儿子（son of beach）,起到了处理一个异步操作的成功与失败，成功了那就执行成功的方法啦，失败了那就走promise失败的方法啦．成功了好啊，失败了抛异常或者失败的处理方法啊．那你家的孩子以后高考的时候假如你用这个玩意就是，成功了你整个家族里亲戚老少在你家办个宴席表示吾儿天下第一，失败呢，要不你弄死他，要不你勉励他说＂吾儿必将东山再起＂．　

　　　1.2.2：promise专业概念：

　　　promise:　The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.(该Promise对象表示异步操作的最终完成（或失败）及其结果值)

             1.2.3:像撩妹子一样的撩一波案例来，来呀，过来

             // 异步操作啊　（当然啦，我是用es6的语法啦，不介意的话可以选择webstorm里面可以设置javascript的版本哦）　　　　

$(function () {
   //好看看下来怎么使用她呢
    let promise=FuckPromise();
    promise.then((result)=>{
        console.log("呀，成功啦，好高兴啊"+result);
     },()=>{
        console.log("失败了，我TMD，呀丫丫");
    });
});

function FuckPromise() {
    let promise=new Promise((resolve,reject)=>{
        //resolve代表成功啊
      　　　  resolve(120);//随便放一个数据来看看成功状态下的处理
        　　　//reject代表失败了啊
        　　　//reject(110);
    });
    //返回这个鬼儿子
    return promise;
}

　　　　＂呀，成功啦，好高兴啊120＂，当然如果是reject呢，输出结果你一定能够想的到．

　　　　1.2.3：上述就是Promise的最简单的使用方法呢，如果你非要将这个东西单独的使用，有个毛用呢，在前端的开发中这个是异步编程的配角．

$(function () {
    //好啦　调用看看啥情况呢
    let pInstance=CreatePromise.createPromise("fuck");
    pInstance.then(arr=>{
        console.log("我成功的查询到了数据")
    },error=>{
        console.log("玛丽隔壁的请求失败了")
    })
});


//new 个类来玩玩es6
class CreatePromise{
    constructor(url){
        this.url=url;//初始化ajax查询的ＵＲＬ
                  this.promise=null;
    }
    //提供个简单的工厂方法产生Promise对象
        static createPromise(){
        this.promise = new Promise((resolve,reject)=>{
             $.ajax({
                 url:this.url,
                 dataType:"json",
                 success:function (arr) {
                     resolve(arr);//成功时候
                                       },
                 error:function (error) {
                     reject(error);//失败时候
                                      }
             });
        });
        return this.promise;
    }
}

　　　1.2.3：那她它又怎么会甘心只做一个异步操作的配角呢，如果做三个异步操作的配角呢，let me see see this case,　　

$(function () {
    //好啦　我带你看三个异步套用操作的case
    let p1=CreatePromise.createPromise("../data/data1.txt");
    let p2=CreatePromise.createPromise("../data/data2.txt");
    let p3=CreatePromise.createPromise("../data/data3.txt");
    //下来看我如何操作 so important
    /**
     * all:所有Promise  (p1,p2,p3)成功就才会进去成功的方法，　
     * first 箭头函数　否则的话只要一个不成功那就是失败啦
     * all方法会将p1 p2 p3 的参数封装在一起送给你
     * 好处是：将p1 p2 p3的返回值在封装在一起返回给你　剩余的　race 等方法自己查询
     */
    Promise.all([p1,p2,p3]).then(
        //成功的时 接受p1,p2,p3调用的resolve的传递过来的data
        (result)=>{
　　　　　　console.log(result);
          //result[0] p1调用的结果
          　　　//result[1] p2调用的结果
          　　　//result[2] p3调用的结果
        },(error)=>{//一个失败全部失败了
          console.log(error);
     })
});

//new 个类来玩玩es6
class CreatePromise{

    constructor(url){
        this.url=url;//初始化ajax查询的ＵＲＬ，实测的时候这个url没有使用到　但是可以理解es6语法
        　　　this.promise=null;
    }
    //提供个简单静态的工厂方法产生Promise对象
    　static createPromise(url){
        return  new Promise((resolve,reject)=>{
             $.ajax({
                 url:url,
                 dataType:"json",
                 success:function (arr) {
                     resolve(arr);//成功时候
              　　　　　　   },
                 error:function (error) {
                     reject(error);//失败时候
               　　　　　　  }
             });
        });
    }
}

                  1.2.4：如果与1.2.3那样操作太麻烦呢，简化一下下，看代码

$(function () {
    //来　来　来　咱们简化操作
    let ajax=$.ajax({url:"../data/data1.txt",dataType:"json"})
    console.log(ajax.promise)//ajax返回的对象中含有promise对象，或者then方法啦自己查询看看
   　 ajax.then(arr=>{
　　　　　console.log(arr)
    },error=>{

    });

    //继续简化
    $.ajax({url:"../data/data1.txt",dataType:"json"}).then(
        arr=>{
            console.log(arr)
        },error=>{

        }
    );
    //继续简化三个promise
    Promise.all([
        $.ajax({url:"../data/data1.txt",dataType:"json"}),
        $.ajax({url:"../data/data2.txt",dataType:"json"}),
        $.ajax({url:"../data/data3.txt",dataType:"json"})
    ]).then(arr=>{
        console.log(arr)
    },error=>{
       //承认失败了啊
    });
});

后续：后续我会更新Promise的关键的状态这个东西，自己会用es6实现一个Promise 承诺，

（我只是个写代码的，还求大神指导）谢谢，可以随便转载，随便copy．

　还有就是想用一个东西我觉得设计的这种原理比起直接获得代码要精彩的多，因为你已经身临其境呢．睡觉啦，晚安Promise