1. 程式人生 > >淺談ES6之promise 實際開發中的使用(一)

淺談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