国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

es6常用知識(三) prosime和generator

flybywind / 2490人閱讀

摘要:異步執行可以用回調函數實現。全成功也可以通過解構數組的方式,將展開賦值??梢砸来文玫矫總€結果。放棄暫時放棄執行相當于創建了一個對象。代表是否完成,代表函數完成,已經到終點。是因為最終的結果需要在最后的時候返回最終結果

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 返回最終結果

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94714.html

相關文章

  • ES6-7

    摘要:的翻譯文檔由的維護很多人說,阮老師已經有一本關于的書了入門,覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中,顯得越來越重要。為了讓編程更美好,我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書(中文版) 超詳細介紹promise的gitbook,看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

    mudiyouyou 評論0 收藏0
  • ES6常用知識點概述

    摘要:那之前的例子來使用一下的話,你會發現瀏覽器報錯了,如圖定義的變量不允許二次修改。如圖箭頭函數沒有它自己的值,箭頭函數內的值繼承自外圍作用域。如圖這里兩邊的結構沒有一致,如果是的話,是可以正常解構的。 前言 國慶假期已過一半,來篇干貨壓壓驚。 ES6,并不是一個新鮮的東西,ES7、ES8已經趕腳了。但是,東西不在于新,而在于總結。每個學前端的人,身邊也必定有本阮老師的《ES6標準入門》或...

    keithyau 評論0 收藏0
  • 從0到1使用VUE-CLI3開發實戰(): ES6/ES7知識儲備

    摘要:它們都用于聲明變量。盲目使用替換后可能會導致預期意外的結果。有鑒于此,還是建議使用字符串,布爾和數字類型的數據類型。像使用這種下劃線命名約定在一個開源項目中,命名規則很難維持得一直很好,這樣經常會造成一些困擾。 今天群里有小伙伴跟我聊天,問了我幾個關于ES6的問題,我才意識到,大部分初學者在學習的過程中,都是學了HTML/CSS/JS之后就開始上手學習框架了,而對于ES6的重視程度卻不...

    crossoverJie 評論0 收藏0
  • ES6 常用知識點總結

    摘要:常用知識總結之前總結了中的一些知識點。在年正式發布了,簡稱,又稱為。作為構造函數的語法糖,同時有屬性和屬性,因此同時存在兩條繼承鏈。子類的屬性,表示構造函數的繼承,總是指向父類。 ES6常用知識總結 之前總結了es5中js的一些知識點。這段時間看了石川blue老師講解的es6課程,結合阮一峰老師的es6教程,隨手做了一些筆記和總結分享給大家。內容還是es6主要的知識點,基本沒有什么創新...

    leap_frog 評論0 收藏0

發表評論

0條評論

flybywind

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<