天下沒(méi)有不散的宴席

這個(gè)系列到這里應(yīng)該就是最后一節(jié)了，前兩章著重講了promise，為什么著重講promise呢？因?yàn)樵谟梅ㄉ蟨romise要比async await難一些，而且promise本身又不是一個(gè)語(yǔ)法糖。沒(méi)有掌握的時(shí)候用起來(lái)就會(huì)有很多顧慮，async await卻沒(méi)有這種顧慮，用法簡(jiǎn)單、語(yǔ)義清晰。

網(wǎng)站建設(shè)公司,為您提供網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì)及定制網(wǎng)站建設(shè)服務(wù),專(zhuān)注于成都定制網(wǎng)頁(yè)設(shè)計(jì),高端網(wǎng)頁(yè)制作,對(duì)成都iso認(rèn)證等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)經(jīng)驗(yàn)的網(wǎng)站建設(shè)公司。專(zhuān)業(yè)網(wǎng)站設(shè)計(jì),網(wǎng)站優(yōu)化推廣哪家好,專(zhuān)業(yè)成都網(wǎng)站推廣優(yōu)化,H5建站,響應(yīng)式網(wǎng)站。

基礎(chǔ)預(yù)熱：你好，JavaScript異步編程---- 理解JavaScript異步的美妙

理解異步之美：Promise與async await（一）

理解異步之美：Promise 與 async await（二）

下面就要開(kāi)始學(xué)習(xí)async await了

不講講迭代器模式總覺(jué)得怪怪的

對(duì)于java語(yǔ)言來(lái)說(shuō)，迭代器是一個(gè)很基本的模式，list與set結(jié)構(gòu)都內(nèi)置了迭代器。

但是javascript并沒(méi)有這種結(jié)果（ps：ES6提供了set，而且也可以實(shí)現(xiàn)迭代器），但是我們對(duì)這種模式實(shí)用的并不是特別多。
迭代器模式是指提供一種方法順序訪(fǎng)問(wèn)一個(gè)聚合對(duì)象中的各個(gè)元素，而又不需要暴露該對(duì)象的內(nèi)部表示。

so：迭代器就是在不暴露對(duì)象的內(nèi)部表示的情況下，能夠遍歷整個(gè)元素

核心嘛就是：不暴露內(nèi)部，可以遍歷內(nèi)部

下面我們就來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的迭代器

// 在數(shù)據(jù)獲取的時(shí)候沒(méi)有選擇深拷貝內(nèi)容，
// 對(duì)于引用類(lèi)型進(jìn)行處理會(huì)有問(wèn)題
// 這里只是演示簡(jiǎn)化了一點(diǎn)
function Iterdtor(arr){
    let data = [];
    if(!Array.isArray(arr)){
        data = [arr];
    }else{
        data = arr;
    }
    let length = data.length;
    let index = 0;
    // 迭代器的核心next
    // 當(dāng)調(diào)用next的時(shí)候會(huì)開(kāi)始輸出內(nèi)部對(duì)象的下一項(xiàng)
    this.next = function(){
        let result = {};
        result.value = data[index];
        result.done = index === length-1? true : false;
        if(index !== length){
            index++;
            return result;
        }
        // 當(dāng)內(nèi)容已經(jīng)沒(méi)有了的時(shí)候返回一個(gè)字符串提示
        return 'data is all done'
    };
}
let arr = [1,2,3,4,5,6];
// 生成一個(gè)迭代器對(duì)象。
let iterdtor = new Iterdtor(arr);
iterdtor.next()
iterdtor.next()

cdn.xitu.io/2018/8/21/1655c7763e4561ce?w=414&h=310&f=png&s=41212">
這就符合迭代器模式的特點(diǎn)，并沒(méi)有暴露內(nèi)部的對(duì)象，
通過(guò)next的方法可以遍歷內(nèi)部對(duì)象。

說(shuō)到現(xiàn)在很多人應(yīng)該還沒(méi)理解為什么要說(shuō)迭代器。

Generator函數(shù)執(zhí)行后會(huì)返回一個(gè)迭代器

async函數(shù)是Generator的語(yǔ)法糖

這兩個(gè)理由是不是一下子就說(shuō)明寫(xiě)迭代器是很有用處的。

書(shū)寫(xiě)一個(gè)簡(jiǎn)單的Generator函數(shù)

function *Iterdtor(){
    console.log(1);
    yield '123';
    console.log(2);
    yield '234';
    console.log(3);
    return '345'
}
let iterator = Iterdtor();

我們執(zhí)行了一下Generator函數(shù)返回一個(gè)迭代器。通過(guò)next方法，可以阻塞性的去執(zhí)行Generator的代碼。

一說(shuō)到阻塞大家就想到同步等待阻塞線(xiàn)程導(dǎo)致頁(yè)面十分卡頓，明明不是一件很好的事情，為什么要用這種東西呢？

下面我們就聊聊這種阻塞性的方式有什么好處呢？

在Generator函數(shù)中，迭代器調(diào)用next函數(shù)后，會(huì)一直執(zhí)行到有yield標(biāo)示的位置停止。等待next的下一次調(diào)用后，代碼會(huì)繼續(xù)執(zhí)行到下個(gè)yield表示。沒(méi)有yield的話(huà)就一執(zhí)行到最后return的位置（沒(méi)有return就會(huì)一直執(zhí)行完所有的代碼，這句話(huà)好像是個(gè)廢話(huà)）。

代碼就像擠牙膏一樣，擠一點(diǎn)出一點(diǎn)擠一點(diǎn)出一點(diǎn)，最后沒(méi)有卡頓的地方，一口氣擠到底。

所以說(shuō)如果實(shí)用Generator的方式來(lái)處理異步的請(qǐng)求會(huì)是怎樣的一種感覺(jué)。

// 偽代碼
let ajaxSign = false;
function *ajaxGetSomething(){
    ajaxSomethingOne().then(res=>{ajaxSign = true})
    yield
    ajaxSign = false;
    ajaxSomethingSecond().then(res=>{ajaxSign = true})
}
let iterator = ajaxGetSomething();
iterator.next();
while(ajaxSign){
    iterator.next()
}

如果以這種方式來(lái)實(shí)現(xiàn)異步的請(qǐng)求會(huì)怎樣，

1:有一個(gè)標(biāo)志代表ajax請(qǐng)求完成。

2:當(dāng)標(biāo)志為true時(shí)代表ajax執(zhí)行完成，可以進(jìn)行下一個(gè)事件了。

3:當(dāng)標(biāo)志為false代碼ajax還未執(zhí)行完成，繼續(xù)阻塞下面的代碼。

4:當(dāng)?shù)谝粋€(gè)標(biāo)志為true時(shí)，執(zhí)行next（），然后發(fā)現(xiàn)到下一個(gè)yield之間有異步的代碼，將標(biāo)志設(shè)置為false，開(kāi)始執(zhí)行ajax的事情，阻塞著后面的內(nèi)容。

5:當(dāng)ajax完成后把標(biāo)志設(shè)置為true，開(kāi)始2的內(nèi)容做的事情不斷執(zhí)行著直到整個(gè)迭代器完成。

粗俗的while循環(huán)實(shí)現(xiàn)next的調(diào)用是不可取的（畢竟偽代碼）

這種方式讓我們體會(huì)到另一種處理異步的方式，就是阻塞時(shí)的去執(zhí)行多個(gè)串行的異步任務(wù)，這樣可以感受同步的寫(xiě)法去書(shū)寫(xiě)異步的代碼，也就不會(huì)在不合適的時(shí)間去拿去異步的產(chǎn)生的數(shù)據(jù)，你阻塞著線(xiàn)程，你不等他執(zhí)行完，你取值的操作也做不了呀。

如何實(shí)用async await

說(shuō)到這里如何使用他們就比較清晰明了了吧

async function ajaxGetData(){
    xxxx
    dosomething()
    await ajaxGetDataFirst()
    dosomething()
    await ajaxGetDataSecond()
    dosomething()
    xxx
}
ajaxGetData()

這個(gè)時(shí)候我們使用async函數(shù)來(lái)處理異步效果就很清晰了，

我們做了一些事情，然后到一個(gè)異步的ajax請(qǐng)求后，等待ajaxGetDataFirst這個(gè)異步的事件執(zhí)行完畢后，開(kāi)始繼續(xù)做一些事情，到了第二個(gè)ajax異步請(qǐng)求ajaxGetDataSecond（），開(kāi)始執(zhí)行阻塞住函數(shù)的執(zhí)行，等待異步事件執(zhí)行完畢后就繼續(xù)做下面的事情。用await關(guān)鍵字的時(shí)候就是在告訴下面的代碼，這塊你得給我等著，wait我執(zhí)行完了才能輪到你 understand？總之a(chǎn)wait吊極了。

await在什么時(shí)候可以用？ 只有在async函數(shù)體內(nèi)部使用，而且這個(gè)作用范圍是不可以繼承下去的。

在promise中怎么使用async函數(shù)

 new Promsie(async (resolve,reject)=>{
     await xxx
 })
 // 這樣的async才能使await有效果，書(shū)寫(xiě)在promise之外的話(huà)await就會(huì)像上面一樣報(bào)錯(cuò)

await 可以接收一個(gè)同步的事情嗎？繼續(xù)執(zhí)行下去不阻塞

async函數(shù)的返回值是什么？
async函數(shù)的返回值是一個(gè)promise對(duì)象,

？？？？ what 返回了一個(gè)promise對(duì)象。這有啥用呢？請(qǐng)聽(tīng)下面分析
這就代表著你在執(zhí)行完所有的異步請(qǐng)求后還可以繼續(xù)將你需要的結(jié)果用return的方式保存在一個(gè)promise對(duì)象中。promise的用處是什么？他好像可以存儲(chǔ)一個(gè)值在指定情況下觸發(fā)一個(gè)回調(diào)函數(shù)（這個(gè)不理解的可以看一下上一篇內(nèi)容哈）所以這可以幫助我們把內(nèi)部的異步請(qǐng)求的數(shù)據(jù)拋出到函數(shù)外部來(lái)。

下面的使用場(chǎng)景：

在使用場(chǎng)景中，我們有的時(shí)候需要異步的一個(gè)結(jié)果，比如ajax請(qǐng)求的結(jié)果，這個(gè)時(shí)候我們希望得到這個(gè)異步的結(jié)果怎么辦？
這個(gè)時(shí)候await可以幫助我，在執(zhí)行完異步的操作的時(shí)候拿到結(jié)果，在拿到結(jié)果后順序執(zhí)行下去。直到return的時(shí)候把這個(gè)結(jié)果 return出去，

以下兩種寫(xiě)法我們是都可以使用的

async function fn(){
    let result = await new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(100)
        },10000)
    }).then(res=>{
            return res
        })
    return result
}
let a = fn()

async function fn(){
    let result = await new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(100)
        },10000)
    })
    return result
}
let a = fn()

這兩種方式都可以等待異步的promise執(zhí)行完成之后再賦值給result，這個(gè)時(shí)候，我們返回的a就是一個(gè)pending狀態(tài)的promise對(duì)象，上一章節(jié)我們講過(guò)了promise的基本原理，后面的操作我就不多提了，所以得到你想要的內(nèi)容的promsie你就會(huì)操作了。

這個(gè)時(shí)候我們async內(nèi)的異步操作的結(jié)果自然而然的可以?huà)伋龅胶瘮?shù)外部來(lái)使用，可以解決很多的業(yè)務(wù)的封裝問(wèn)題了。

async 與 Generator的區(qū)別

async 與Generator的區(qū)別是什么？

async是Generator的語(yǔ)法糖，Generator是可以用來(lái)實(shí)現(xiàn)async的，用Generator來(lái)實(shí)現(xiàn)async的核心就是實(shí)現(xiàn)這種不需next調(diào)用自執(zhí)行的內(nèi)容，這是我以后要進(jìn)行學(xué)習(xí)的（目前時(shí)間不是很充裕，打算學(xué)好之后出一個(gè)特別篇好好實(shí)現(xiàn)以下async）

尾聲咯

這一節(jié)內(nèi)容并沒(méi)有講很多async的內(nèi)容，反而是先講了迭代器，再講了Generator，最后對(duì)async的使用簡(jiǎn)單介紹了一下，這是我在學(xué)習(xí)async時(shí)的順序，async用起來(lái)容易、同步的寫(xiě)法也比較熟悉，but?。?！易用的東西往往代表著方法內(nèi)部蘊(yùn)含很多你不知道的東西，
這才是我們要挖掘的AV8D?。。?！

總結(jié)一下

異步的事情我們理解了，異步程序執(zhí)行的過(guò)程，了解了event table，任務(wù)隊(duì)列，宏任務(wù)微任務(wù)的執(zhí)行先后條件。了解了異步promise的用法，promise的實(shí)現(xiàn)機(jī)制、async的用法，以及衍生出來(lái)的迭代器知識(shí)。

這一段時(shí)間和邊學(xué)習(xí)邊產(chǎn)出文章，有一種被大家鞭策的感覺(jué)，哈哈哈哈哈。鞭策這個(gè)詞有點(diǎn)怪怪的，這個(gè)過(guò)程中我發(fā)現(xiàn)學(xué)習(xí)不能只有興趣，興趣可以幫你研究你喜歡的內(nèi)容時(shí)有無(wú)限的動(dòng)力，上了發(fā)條一樣，在你低谷、沒(méi)有興趣的時(shí)候還需要鞭策來(lái)幫你去學(xué)習(xí)新的不擅長(zhǎng)的知識(shí)，

以前異步是我掌握最差的部分，在這一個(gè)階段的學(xué)習(xí)我收獲很多不知道身為讀者的你收獲了多少呢？ 只有你自己知道了

有結(jié)束也有開(kāi)始

異步的美妙我們就算是先告一段落。

下面的一個(gè)巨大的系列章節(jié)，我將會(huì)對(duì)vuer-router源碼進(jìn)行一個(gè)系統(tǒng)的學(xué)習(xí)，并且隨著學(xué)習(xí)之中產(chǎn)出文檔喲，算是繼續(xù)鞭策和與大家一塊學(xué)習(xí)。
還是那個(gè)熟悉的結(jié)束語(yǔ)：每一個(gè)前端coder（boy and girl）你們永遠(yuǎn)不是一個(gè)人在戰(zhàn)斗~

新聞標(biāo)題：[完結(jié)篇]-理解異步之美---promise與asyncawait（三）
鏈接分享：http://aaarwkj.com/article10/jegsdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、云服務(wù)器、品牌網(wǎng)站設(shè)計(jì)、域名注冊(cè)、響應(yīng)式網(wǎng)站、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)