js異步從入門到放棄(實踐篇) — 常見寫法&面試題解析

Awbeci 發布于2019-08-23 18:05 / 3075人閱讀

摘要：前文該系列下的前幾篇文章分別對不同的幾種異步方案原理進行解析，本文將介紹一些實際場景和一些常見的面試題。流程調度里比較常見的一種錯誤是看似串行的寫法，可以感受一下這個例子判斷以下幾種寫法的輸出結果辨別輸出順序這類題目一般出現在面試題里。

前文

該系列下的前幾篇文章分別對不同的幾種異步方案原理進行解析，本文將介紹一些實際場景和一些常見的面試題。(積累不太夠，后面想到再補)

正文 流程調度(schedule)

流程調度，最常見的就是繼發和并發（或者說串行和并行）兩種類型，在日常工作里都很常見。接下來結合實際場景進行說明：

1. 串行執行一系列異步操作，每一步依賴前一步的結果

串行執行的關鍵是，將每一個異步任務放到前一個異步任務的回調函數里執行。

場景：一串連續的動畫，每個動畫必須等待前一個動畫完全執行完，并且如果某個動畫執行失敗，則不繼續執行下一個動畫。

代碼：

    
    // 這里假定一共要執行5個動畫 
    
    // getAnimation 函數模擬執行動畫 接收參數i表述動畫編號 返回一個promose
    const getAnimation = (i) => new Promise((resolve, reject) => {
        setTimeout(()=>{
            // 隨機返回true或者false 
            const isSuccess = Math.random() > 0.5
            console.log(`第${i}個動畫執行`)
            if(isSuccess){
                return resolve(isSuccess)
            }
            return reject(isSuccess)
        },1000)
    })

    // 1.promise實現 核心就是嵌套代碼
    const serialScheduleByPromise = () => {
        let p = Promise.resolve(true)
        const tasks = []
        for(let i=0;i < 5; i++){
            p = p.then(isSuccess=>{
                if(isSuccess){
                    return getAnimation(i+1)
                }
            }).catch((err)=>{
            return console.log(`執行失敗`)
        })
        }
    }
    serialScheduleByPromise()

    // 2.async/await實現
    const serialScheduleByAsync = async () => {
        try{
        for(let i=0;i < 5; i++){
            await getAnimation(i+1)
        }}catch(e){
            console.log(`執行失敗`)
        }
    }
    serialScheduleByAsync()

async/await的語法雖然沒有多帶帶解析，但是本質就是前一篇介紹的帶自動執行器的generator而已，因此不再贅述
可以看到，async的寫法代碼更簡潔，而且邏輯更清晰，可讀性更強。

2. 并行執行所有異步操作，等到所有請求完成后，按照讀取請求的順序輸出結果

場景：并發讀取5個數據（為了方便分別編號為1-5），然后按照實際讀取順序結果

    const getDataById = (i) => new Promise((resolve, reject) => {
        // 隨機延遲一個時間返回結果，
        const delay = Math.floor(Math.random() * Math.floor(3000)) // 延遲時間可能為 0，1000，2000 毫秒
        setTimeout(()=>{
            return resolve(i)
        }, delay)
    })
    
    // 1.promise實現
    const concurrentScheduleByPromise = ()=>{
        const promises = []
        const result = []
        for(let i = 0;i < 5;i++){
            promises[i] = getDataById(i+1)
            promises[i].then(i=>{
                result.push(i)
            })
        }
        Promise.all(promises).then(()=>{
            result.forEach(id=>{
                console.log(id)
            })
        })
    }
    concurrentScheduleByPromise()

    // async/await實現
    const concurrentScheduleByAsync = () => {
        for(let i = 0 ;i < 5; i++){
            let task = async function (){
                console.log(await getDataById(i+1))
            }
            task()
        }
    }
    concurrentScheduleByAsync()

注意辨析這里concurrentScheduleByAsync和serialScheduleByAsync的區別，關鍵點是同一個async函數內部的await才是按順序執行。

流程調度里比較常見的一種錯誤是“看似串行”的寫法，可以感受一下這個例子:

    const getPromise = (name) =>new Promise(resolve=>{
        setTimeout(()=>{
            console.log(name)
            resolve(name)
        },1000)
    })
    
    // 判斷以下幾種寫法的輸出結果 
    Promise.resolve().then(getPromise("1a")).then(getPromise("1b")).then(getPromise("1c")) 
    Promise.resolve().then(()=>getPromise("2a")).then(()=>getPromise("2b")).then(()=>getPromise("2c")) 
    Promise.resolve().then(getPromise("3a").then(getPromise("3b").then(getPromise("3c")))) 
    Promise.resolve().then(()=>getPromise("4a").then(()=>getPromise("4b").then(()=>getPromise("4c"))))

辨別輸出順序

這類題目一般出現在面試題里。

1. 基礎-區分不同任務類型

    console.log(1)
    new Promise(resolve => {
        console.log(2)
        setTimeout(() => {
            console.log(10)
        }, 10)
        resolve()
        console.log(3)
    }).then(() => {
        console.log(5)
    })

    setTimeout(() => {
        console.log(7)
        Promise.resolve().then(() => {
            console.log(9)
        })
        console.log(8)
    })

    Promise.resolve().then(() => {
        console.log(6)
    })
    console.log(4)
    // 輸出 1 2 3 4 5 6 7 8 9 10

2. 復雜-加入瀏覽器render




    outer
         inner

這類問題實質上就是辨析異步任務隊列類型，詳細內容和解析可以直接看js異步從入門到放棄（三）- 異步任務隊列(task queues)。

小結

這篇文章主要是給這個系列做個簡單的收尾，多帶帶純異步的問題難點其實也不多，偷個懶，后面想到了再補上。

如果覺得寫得不好/有錯誤/表述不明確，都歡迎指出
如果有幫助，歡迎點贊和收藏，轉載請征得同意后著明出處。如果有問題也歡迎私信交流，主頁有郵箱地址
如果覺得作者很辛苦，也歡迎打賞~

云服務器 GPU云服務器手寫js面試題 js原型面試題 python3入門到實踐 js的基礎面試題

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

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

前端資源系列（4）-前端學習資源分享&amp;前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
javasscript - 收藏集 - 掘金

摘要：跨域請求詳解從繁至簡前端掘金什么是為什么要用是的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題。異步編程入門道典型的面試題前端掘金在界中，開發人員的需求量一直居高不下。 jsonp 跨域請求詳解——從繁至簡 - 前端 - 掘金什么是jsonp？為什么要用jsonp?JSONP(JSON with Padding)是JSON的一種使用模式，可用于解決主流瀏覽器的跨域數據訪問的問題...

Rango 2019-08-20 17:15 評論0 收藏0
Deep in JS - 收藏集 - 掘金

摘要：今天同學去面試，做了兩道面試題全部做錯了，發過來給道典型的面試題前端掘金在界中，開發人員的需求量一直居高不下。排序算法 -- JavaScript 標準參考教程（alpha） - 前端 - 掘金來自《JavaScript 標準參考教程（alpha）》，by 阮一峰目錄冒泡排序簡介算法實現選擇排序簡介算法實現 ... 圖例詳解那道 setTimeout 與循環閉包的經典面...

enali 2019-08-20 16:36 評論0 收藏0
前端面試之路二(javaScript基礎整理)

摘要：在標簽中添加屬性，本質上是跟在標簽里面寫屬性時一樣的，所以屬性值最終都會編譯為字符串類型。這個節點包括很多，比如，以及一些方法等方法。一個對象有很多，該集合名字為，里面有其他以及，里面有很多。一、變量類型和計算 JS中使用typeof能得到哪些類型變量類型值類型：變量本身就是含有賦予給它的數值的，它的變量本身及保存的數據都存儲在棧的內存塊當中引用類型：引用類型當然是分配到...

AbnerMing 2019-08-23 10:43 評論0 收藏0
前端最實用書簽(持續更新)

摘要：前言一直混跡社區突然發現自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術做了一個書簽整理不求最多最全但求最實用。前言一直混跡社區,突然發現自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術做了一個書簽整理,不求最多最全,但求最實用。書簽源碼書簽導入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

sshe 2019-08-23 12:00 評論0 收藏0