成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js的異步回調(diào)之a(chǎn)sync/await

vspiders / 1053人閱讀

摘要：假如返回的不是一個(gè)對(duì)象，是其他的任何返回值，后面的語句會(huì)立即執(zhí)行。而關(guān)鍵字只有得到返回值后才繼續(xù)執(zhí)行，不就是同步么。

最近在學(xué)習(xí)NodeJS框架koa V2，koa2的API很簡(jiǎn)單，基于ES7 async/await實(shí)現(xiàn)異步代碼。很多人認(rèn)為async/await是解決異步終極解決方案，那我們就研究下async/await。
前端業(yè)務(wù)邏輯越來越復(fù)雜，往往幾個(gè) AJAX 請(qǐng)求之間互有依賴，有些請(qǐng)求依賴前面請(qǐng)求的數(shù)據(jù)，有些請(qǐng)求需要并行進(jìn)行。我們用ajax來做個(gè)例子,根據(jù)查找一個(gè)省份中的第一個(gè)市的區(qū)縣。

$.get("/url/city",[province:"河北省"],function (result1){
    console.log(result1);
    $.get("/url/county",[city:result1[1]]，function (result2){
        console.log(result2);
    })
})

這個(gè)是用回調(diào)函數(shù)執(zhí)行的異步操作，大量的異步操作就有大量的回調(diào)函數(shù)，現(xiàn)在我們是嵌套來三層，假如我們嵌套了四層五層更多層，這個(gè)時(shí)候使用回調(diào)函數(shù)來寫代碼往往會(huì)導(dǎo)致代碼難以閱讀,就會(huì)形成了回調(diào)地獄Callback hell。
現(xiàn)在我們用比較優(yōu)雅一點(diǎn)的，看起來像同步實(shí)則異步的async/await 重構(gòu)一下代碼。

    var requestUrl=(url,args)=>{
     return new Promise(function(resolve,reject){
        $.get(url,args,(result)=> {
             try {
                  resolve(JSON.parse(result));
             }catch(e){
                  reject(e);
             }    
         }) 
     })
    
}
async function getCounty(province){
    try{
        let result1=await requestUrl("/url/city",{provinces:province});
        console.log(result1);
    }catch(e){
        console.log(e);
    }
    try{
        let result2=await requestUrl("/url/county",{city:result1[1]});
        console.log(result2);
    }catch(e){
        console.log(e);
    }
};
getCounty("河北省");

首先我們定義了一個(gè)requestUrl函數(shù)，這個(gè)函數(shù)返回一個(gè)Promise對(duì)象resolve，并拿到結(jié)果，立即執(zhí)行函數(shù)定義時(shí)使用了關(guān)鍵字async，在函數(shù)體中配合使用了await，執(zhí)行第一個(gè)await會(huì)返回‘/url／province’的執(zhí)行數(shù)據(jù)所有河北省的市，執(zhí)行第二個(gè)await，返回根據(jù)第一個(gè)市里面的區(qū)縣。

現(xiàn)在我們了解一下async/await的用法；

async關(guān)鍵字表示這個(gè)是一個(gè)異步函數(shù)，await只能使用在這個(gè)函數(shù)里面，如果是在普通函數(shù)就會(huì)報(bào)錯(cuò)；
await的作用是獲取一個(gè)promise對(duì)象，獲取返回值之前await后面的語句是無法繼續(xù)執(zhí)行的。假如await返回的不是一個(gè)promise對(duì)象，是其他的任何返回值，await后面的語句會(huì)立即執(zhí)行。

ajax比較容易看出call hell問題，現(xiàn)在我們弄個(gè)簡(jiǎn)單的例子，可以在babel中執(zhí)行一下。

var sleep = function (time) {
        setTimeout(function () {
            console.log("test");
        }, time);
};
var start = async function () {
    console.log("start");
    await sleep(3000);
    console.log("end");
};

start();
這個(gè)是沒有返回promise對(duì)象的例子，執(zhí)行start(）后，先輸出’start‘,然后"end",三秒鐘后輸出"test";

var sleep = function (time) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve("test");
            console.log("test");
        }, time);
    })
};
async function start() {
    console.log("start");
    let result = await sleep(8000);
    console.log("end");
};
start();

這個(gè)是返回promise對(duì)象，它先輸出‘start’,然后是等待三秒輸出‘test’，最后輸出‘end’;

在學(xué)習(xí)過程中，我被一句話給誤導(dǎo)了，‘看起來像同步實(shí)則異步的async/await’，就走到了一個(gè)死胡同里，await關(guān)鍵字聲明一個(gè)異步函數(shù)，但是await阻止了await后面語句執(zhí)行，只有await等到了一個(gè)返回值才會(huì)繼續(xù)執(zhí)行，這不就是同步執(zhí)行了嗎？徹底的懵了，后來恍然大悟，async聲明start()為異步函數(shù)，假如再有一個(gè)start2(),它們并行執(zhí)行的，在babel里面測(cè)試如下圖：

所以異步的點(diǎn)在這。而await關(guān)鍵字只有得到返回值后才繼續(xù)執(zhí)行，不就是同步么。搞定?。。?br>async函數(shù)返回一個(gè)Promise對(duì)象，可以使用then()添加回調(diào)，catch()捕獲異常，當(dāng)我們也可以用try/catch，就是

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81730.html

相關(guān)文章

  • JS 異步(callback→Promise→async/await)

    摘要：異步編程三座大山原型原型鏈作用域閉包同步異步。異步操作執(zhí)行完畢后，再執(zhí)行該回調(diào)函數(shù)，確保回調(diào)在異步操作之后執(zhí)行。回調(diào)函數(shù)本身是我們約定俗成的一種叫法，我們定義它，但是并不會(huì)自己去執(zhí)行它，它最終被其他人執(zhí)行了。 JS異步編程 JS三座大山：原型原型鏈、作用域閉包、同步異步。之前有寫過自己對(duì)閉包的理解，今天來總結(jié)一下JS中的異步。 思考（案例來自stackoverflow）： functi...

    gougoujiang 評(píng)論0 收藏0

  • JavaScript 工作原理之四－事件循環(huán)及異步編程的出現(xiàn)和 5 種更好的 async/await

    摘要：函數(shù)會(huì)在之后的某個(gè)時(shí)刻觸發(fā)事件定時(shí)器。事件循環(huán)中的這樣一次遍歷被稱為一個(gè)。執(zhí)行完畢并出棧。當(dāng)定時(shí)器過期，宿主環(huán)境會(huì)把回調(diào)函數(shù)添加至事件循環(huán)隊(duì)列中，然后，在未來的某個(gè)取出并執(zhí)行該事件。 原文請(qǐng)查閱這里，略有改動(dòng)。 本系列持續(xù)更新中，Github 地址請(qǐng)查閱這里。 這是 JavaScript 工作原理的第四章。 現(xiàn)在，我們將會(huì)通過回顧單線程環(huán)境下編程的弊端及如何克服這些困難以創(chuàng)建令人驚嘆...

    maochunguang 評(píng)論0 收藏0

  • 筆試題之Event Loop終極篇

    摘要：下面開始分析開頭的代碼第一輪事件循環(huán)流程整體作為第一個(gè)宏任務(wù)進(jìn)入主線程，遇到，輸出遇到函數(shù)聲明，聲明暫時(shí)不用管遇到，其回調(diào)函數(shù)被分發(fā)到微任務(wù)中。我們記為遇到，其回調(diào)函數(shù)被分發(fā)到宏任務(wù)中。 先上一道常見的筆試題 console.log(1); async function async1() { console.log(2); await async2(); con...

    niceforbear 評(píng)論0 收藏0

  • ES6-7

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

    mudiyouyou 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<