es6經常使用知識（三） prosime和generator

prosime

在JavaScript的世界中，全部代碼都是單線程執行的。
因爲這個「缺陷」，致使JavaScript的全部網絡操做，瀏覽器事件，都必須是異步執行。異步執行能夠用回調函數實現。

1 promise 翻譯過來是 承諾的意思。
異步：操做之間沒啥關係。同時進行多個操做。
同步：同時只能作一件事情。
異步的缺點就是，代碼複雜，一層套一層，若是須要執行不少個異步操做都完成在執行某個事情，那麼就要嵌套不少層，代碼可讀性差，很差維護。如：

// 異步
 ajax('/bannders',function(bannder_data){
     ajax('/hotItems',function(hotItems_data){
         ajax('/slides',function(slides_data){

         }，function(){
             alert("讀取失敗")
         })
     },function(){
         alert("讀取失敗")
     })
 },function(){
     alert("讀取失敗")
 })

同步：代碼簡單 ,寫起來方便

// 同步
    let bannder_data=ajax_async('/bannders')
    let hotItems_data=ajax_async('/hotItems')
    let slides_data=ajax_async('/slides')

但是同步雖然寫法簡單，可是每一個步驟須要等待上一個操做結束，因此實際項目中須要的是異步（不等待）的操做。
因而prosime出現了，他的做用就是：

• 消除異步操做
• 用同步同樣的方式來書寫異步代碼

1.Prosime到底怎麼用

prosime是es6自帶的。須要的用prosime的時候，能夠直接new出來一個peomise對象。promise裏面有一個參數，這個參數是函數，全部的異步操做代碼都寫在這個函數裏面。這個函數有兩個參數，一個是resolve（成功），另一個是reject（失敗）。例如：

var  p=new Promise(function (resolve,reject) {
   異步代碼
   resolve--成功
   reject---失敗
   $.ajax({
       url:'data/arr.txt',
       dataType:'json',
       success(arr){
           resolve(arr)
       },
       error(err){
           reject(err)
       }
   })
})

promise的使用：p裏面的then方法的意思是而後呢？就是當peomise對象執行以後有結果了，
以後執行。then裏面有兩個參數，都是函數，第一個函數其實就是resolve對應的結果。
第二個函數就是reject對象的結果。

p.then(function(arr){
   console.log('成功了',arr)
},function(err){
   console.log('失敗了',err)
})

2.封裝兩個promise

var  p1=new Promise(function (resolve,reject) {
   異步代碼
   resolve--成功
   reject---失敗
   $.ajax({
       url:'data/arr.txt',
       dataType:'json',
       success(arr){
           resolve(arr)
       },
       error(err){
           reject(err)
       }
   })
})


var  p2=new Promise(function (resolve,reject) {
   異步代碼
   resolve--成功
   reject---失敗
   $.ajax({
       url:'data/json.txt',
       dataType:'json',
       success(arr){
           resolve(arr)
       },
       error(err){
           reject(err)
       }
   })
})
promie上有一個方法all，就是全都執行完之後，all的參數是一個數組，是因此的promise對象，
以後then方法裏面有兩個參數，都是函數，第一個函數其實就是全都成功之後，其函數的參數就是返回全部resolve結果。，第二個函數是隻是有一個失敗了。：
Promise.all([p1,p2]).then(function(arr){
   alert("全成功")
   console.log(arr)
   也能夠經過解構數組的方式，將arr展開賦值。能夠依次拿到 每一個resolve結果。
   let  [p1,p2]=arr
   console.log(p1)
   console.log(p2)
},function(){
   alert("至少有一個失敗")
})

Promise的二次封裝，createPromise，抽出可變的URL便可。

function createPromise(url) {
    return new Promise(function (resolve, reject) {
        // 異步代碼
        // resolve--成功
        // reject---失敗
        $.ajax({   
            url,//    url:url      json 值和名相同可簡寫，
            dataType: 'json',
            success(arr) {
                resolve(arr)
            },
            error(err) {
                reject(err)
            }
        })
    })
}


// promie上有一個方法all，就是全都執行完之後，all的參數是一個數組，是因此的promise對象，
// 以後then方法裏面有兩個參數，都是函數，第一個函數其實就是全都成功之後，其函數的參數就是返回全部resolve結果。，第二個函數是隻是有一個失敗了。：
Promise.all([createPromise('data/arr.txt'), createPromise('data/json.txt')]).then(function (arr) {
    alert("全成功")
    console.log(arr)
    //    也能夠經過解構數組的方式，將arr展開賦值。能夠依次拿到 每一個resolve結果。
    let [p1, p2] = arr
    console.log(p1)
    console.log(p2)
}, function () {
    alert("至少有一個失敗!")
})

generator （生成器）

1.什麼是generaor函數。

Generator函數是一個帶星星函數（星號和function和函數名不能同時鏈接接口），並且是一個能夠暫停的函數。
函數的內部經過yield來推動函數。經過定義yield後面的值來決定返回的value。
函數返回一個遍歷器，這個遍歷器有一個next方法，能夠獲取一個對象，這個對象就包含了yield定義好的參數。

function *show(){
        alert('a')
        yield; //放棄（暫時放棄執行）
        alert('b')
    }
    let genObj=show() //至關於建立了一個generator對象。
    //這個對象裏有一個很重要的東西next（），就是下一步，下一步。
    //就是踹一腳走一步。
    genObj.next() //執行一步以後，看到yield以後，就中止執行了。
    //若是想讓alert（’b‘）出來就須要next兩步。
    genObj.next()

普通函數 ----一路到底
generator函數---中間能停

2.yield的傳參

2.1第一個next是廢的，不能傳參。

// yield能夠傳參
function *show(){
    alert('a');

    let a=yield;
    alert('b');
    alert(a);
}
let gen=show();
gen.next(12);  //經過yield傳參的時候，第一個next是廢的，傳傳不了，若是想給第一個yield傳參，
//經過函數就能夠傳參
gen.next(5);

2.2給第一個yield傳參，就直接經過函數傳參就能夠了

// 給第一個yield傳參，就直接經過函數傳參就能夠了。
    function *show(num1,num2){
        alert(`${num1},${num2}`)
        alert('a');
        
        let a=yield;
        alert('b');
        alert(a);
    }
    let gen=show(98,97);
    gen.next(12);  //經過yield傳參的時候，第一個next是廢的，傳傳不了，若是想給第一個yield傳參，
    //經過函數就能夠傳參
    gen.next(5);

3 yield的返回值。

3.1 done表明是否完成

function * show (){
        alert('a')
        yield 12;
        alert('b')
    }
    let gen =show()
    let res1=gen.next()
    console.log(res1)// {done:false, value:12} //done 表明是否完成，表明函數沒完成，沒到終點。
    let res2=gen.next()
    console.log(res2) // {done:true, value:undefind} //done 表明是否完成，true表明函數完成，已經到終點。undefind是由於最終的結果須要在
    // generator最後的時候return 返回最終結果

3.2 generator最後的return是返回最終結果

function * show (){
        alert('a')
        yield 12; //yield返回
        alert('b')
        return 100
    }
    let gen =show()
    let res1=gen.next()
    console.log(res1)// {done:false, value:12} //done 表明是否完成，表明函數沒完成，沒到終點。
    let res2=gen.next()
    console.log(res2) // {done:true, value:100} //done 表明是否完成，true表明函數完成，已經到終點。undefind是由於最終的結果須要在
    // generator最後的時候return 返回最終結果