淺談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查詢的URL
                  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,實測的時候這個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

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com