async/await非同步不阻塞呼叫

我不會典韋發表於2019-01-17
AI非同步

es6有兩個新的非同步語法，一個是async，await，一個是promise，兩者我更青睞於async，await，原因很簡單，async，await語法糖讓程式碼更清晰，更直觀。
簡單的講一下，async函式返回一個 Promise 物件，可以使用then方法新增回撥函式。當函式執行的時候，一旦遇到await就會先返回，等到非同步操作完成，再接著執行函式體內後面的語句。那其實就是說在async函式內，每當遇到await關鍵字的時候，函式就是阻塞住，必須等到非同步操作有結果時才會往下繼續執行，思考下，我們關心的非同步返回的結果，那麼也就是說我們可以非同步函式執行的結果儲存起來，在需要的時候再去await，看下面的程式碼

function asyncAfun() {
    return new Promise((resolove)=>{
        setTimeout(function() {
            resolove(123);
        }, 3000);
    })    
}
function asyncBfun() {
    return new Promise((resolove)=>{
        setTimeout(function() {
            resolove(456);
        }, 3000);
    })    
}
async function test () {
    let a = asyncAfun();//不阻塞
    let b = asyncBfun();//不阻塞
    let _a = await a; //這裡等待a的返回 後面可以do something
    let _b = await b;//這裡等待b的返回 後面可以do something
}

那麼當你需要同時併發大量請求，並且等待所有的請求結果完成的時候可以這麼寫

async function test () {
    let a = asyncAfun();
    let b = asyncBfun();
    let _a = await a;
    let _b = await b;
    Promise.all([_a,_b]).then(v=>{
        console.log(v)
    })
}

Promise.all的作用可以去MDN查，類似的還有Promise.race

學以致用，以上

相關文章