以同步格式寫異步代碼 - await

ashe 發(fā)布于2019-08-26 12:24 / 1456人閱讀

摘要：用優(yōu)雅的方式編寫異步代碼前言隨著互聯(lián)網(wǎng)的發(fā)展，的應用越來越廣泛，地位也越來越重要，網(wǎng)站也發(fā)生了翻天覆地的變化。也是中的關鍵字，字面意思是異步，作用就是聲明一個異步方法。注意不能多帶帶存在，必須和異步關鍵字一起使用。

用優(yōu)雅的方式編寫異步代碼-Eric

前言

隨著互聯(lián)網(wǎng)的發(fā)展，js的應用越來越廣泛，地位也越來越重要，網(wǎng)站也發(fā)生了翻天覆地的變化。
到目前為止，前后臺基本徹底分離，交互都采用異步的方式，ajax、fetch...

fetch

目前大部分互聯(lián)網(wǎng)公司開發(fā)都轉向React、Vue，前后臺交互也大都使用fetch取代ajax，而我們知道fetch的實現(xiàn)原理采用了es6中的Promise，Promise把異步請求變得簡單優(yōu)雅，代碼示例：

fetch(url, {})
    .then(response=>{})
    .then(res=>{})
    .catch(err=>{});

我們要處理返回結果一般這么寫：

fetch(url, {})
    .then(response=>{ return response.json() })
    .then(res=>{
        // 結果處理
        if(res.success){
            // somecode...
        }
    })
    .catch(err=>{});

如果處理邏輯比較多，這么寫不直觀，能不能這么寫呢：

let res = fetch(url, {});
// 結果處理
if(res.success){
    // somecode...
}

結果當然是可以的，那就是es7中的await

await & async

await 是es7中定義的一個關鍵字，可以等待Promise返回數(shù)據(jù)，相當于暫停功能，await字面意思就是等待。
async也是es7中的關鍵字，字面意思是異步，作用就是聲明一個異步方法。

注意：
1、await不能多帶帶存在，必須和async（異步）關鍵字一起使用。
2、await 后面如果不是一個Promise對象的話，那么不會等待哦！

代碼走一波：

// async寫在方法前面
asyncFunc = async ()=>{

    console.time();

    let res = await (new Promise((resolve, reject)=>{
        setTimeout(resolve.bind(this, 10), 2000);
    }));

    console.timeEnd(); // default: 2711.656982421875ms  等待Promise執(zhí)行完畢

    console.log( res ); // 10  拿到了Promise的返回結果
}

asyncFunc();

await 對普通異步代碼無效：

asyncFunc2 = async ()=>{

    console.time();

    let res = await setTimeout( ()=>{return 10}, 2000);

    console.timeEnd(); // default: 0.705078125ms， 說明沒有等待setTimeout完成

    console.log( res ); // 737 setTimeout定時器的返回值
}

asyncFunc2();

更多操作自己去實踐吧！

擴展

有興趣的小伙伴可以去研究下 yield 關鍵字哦，可以暫停方法的執(zhí)行，并返回yield 后面的值

喜歡我的文章就點贊轉發(fā)吧！

GPU云服務器云服務器同步和異步同步與異步同步回調(diào)和異步回調(diào) 同步調(diào)用和異步調(diào)用

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

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

async/await 異步應用的常用場景

摘要：下面將簡單地描述一下一些日常常用場景加深對認識最普遍的異步操作就是請求我們也可以用來簡單模擬異步請求。其中是必須的如果省略了程序就不能按預期得到結果。前言 async/await 語法用看起來像寫同步代碼的方式來優(yōu)雅地處理異步操作,但是我們也要明白一點,異步操作本來帶有復雜性,像寫同步代碼的方式并不能降低本質(zhì)上的復雜性,所以在處理上我們要更加謹慎, 稍有不慎就可能寫出不是預期執(zhí)行的代...

ermaoL 2019-08-02 16:18 評論0 收藏0
async/await 異步應用的常用場景

摘要：下面將簡單地描述一下一些日常常用場景加深對認識最普遍的異步操作就是請求我們也可以用來簡單模擬異步請求。其中是必須的如果省略了程序就不能按預期得到結果。前言 async/await 語法用看起來像寫同步代碼的方式來優(yōu)雅地處理異步操作,但是我們也要明白一點,異步操作本來帶有復雜性,像寫同步代碼的方式并不能降低本質(zhì)上的復雜性,所以在處理上我們要更加謹慎, 稍有不慎就可能寫出不是預期執(zhí)行的代...

darkbug 2019-08-26 13:45 評論0 收藏0
async/await 異步應用的常用場景

摘要：下面將簡單地描述一下一些日常常用場景加深對認識最普遍的異步操作就是請求我們也可以用來簡單模擬異步請求。其中是必須的如果省略了程序就不能按預期得到結果。前言 async/await 語法用看起來像寫同步代碼的方式來優(yōu)雅地處理異步操作,但是我們也要明白一點,異步操作本來帶有復雜性,像寫同步代碼的方式并不能降低本質(zhì)上的復雜性,所以在處理上我們要更加謹慎, 稍有不慎就可能寫出不是預期執(zhí)行的代...

寵來也 2019-08-30 10:53 評論0 收藏1
細說JS異步發(fā)展歷程

摘要：換句話說，當一個異步過程調(diào)用發(fā)出后，調(diào)用者不會立刻得到結果。參考文章珠峰架構課墻裂推薦細說異步函數(shù)發(fā)展歷程異步編程謝謝各位小伙伴愿意花費寶貴的時間閱讀本文，如果本文給了您一點幫助或者是啟發(fā)，請不要吝嗇你的贊和，您的肯定是我前進的最大動力。知其然知其所以然，首先了解三個概念： 1.什么是同步？所謂同步，就是在發(fā)出一個調(diào)用時，在沒有得到結果之前，該調(diào)用就不返回。但是一旦調(diào)用返回，就得到返回值了...

Alfred 2019-05-23 12:19 評論0 收藏0
細說JS異步發(fā)展歷程

摘要：參考文章珠峰架構課墻裂推薦細說異步函數(shù)發(fā)展歷程異步編程謝謝各位小伙伴愿意花費寶貴的時間閱讀本文，如果本文給了您一點幫助或者是啟發(fā)，請不要吝嗇你的贊和，您的肯定是我前進的最大動力。知其然知其所以然，首先了解三個概念： 1.什么是同步？所謂同步，就是在發(fā)出一個調(diào)用時，在沒有得到結果之前，該調(diào)用就不返回。但是一旦調(diào)用返回，就得到返回值了。換句話說，就是由調(diào)用者主動等待這個調(diào)用的結果。此調(diào)...

RiverLi 2019-08-26 13:53 評論0 收藏0