JavaScript 異步編程

lordharrd 發(fā)布于2019-08-23 12:26 / 1608人閱讀

摘要：下面我將介紹的基本用法以及如何在異步編程中使用它們。在沒有發(fā)布之前，作為異步編程主力軍的回調(diào)函數(shù)一直被人詬病，其原因有太多比如回調(diào)地獄代碼執(zhí)行順序難以追蹤后期因代碼變得十分復(fù)雜導(dǎo)致無法維護(hù)和更新等，而的出現(xiàn)在很大程度上改變了之前的窘境。

前言

自己著手準(zhǔn)備寫這篇文章的初衷是覺得如果想要更深入的理解 JS，異步編程則是必須要跨過的一道坎。由于這里面涉及到的東西很多也很廣，在初學(xué) JS 的時(shí)候可能無法完整的理解這一概念，即使在現(xiàn)在來看還是有很多自己沒有接觸和理解到的知識點(diǎn)，但是為了跨過這道坎，我仍然愿意鼓起勇氣用我已經(jīng)掌握的部分知識盡全力講述一下 JS 中的異步編程。如果我所講的一些概念或術(shù)語有錯(cuò)誤，請讀者向我指出問題所在，我會立即糾正更改。

同步與異步

我們知道無論是在瀏覽器端還是在服務(wù)器 ( Node ) 端，JS 的執(zhí)行都是在單線程下進(jìn)行的。我們以瀏覽器中的 JS 執(zhí)行線程為例，在這個(gè)線程中 JS 引擎會創(chuàng)建執(zhí)行上下文棧，之后我們的代碼就會作為執(zhí)行上下文 ( 全局、函數(shù)、eval ) 像一系列任務(wù)一樣在執(zhí)行上下文棧中按照后進(jìn)先出 ( LIFO ) 的方式依次執(zhí)行。而同步最大的特性就是會阻塞后面任務(wù)的執(zhí)行，比如此時(shí) JS 正在執(zhí)行大量的計(jì)算，這個(gè)時(shí)候就會使線程阻塞從而導(dǎo)致頁面渲染加載不連貫 ( 在瀏覽器端的 Event Loop 中每次執(zhí)行棧中的任務(wù)執(zhí)行完畢后都會去檢查并執(zhí)行事件隊(duì)列里面的任務(wù)直到隊(duì)列中的任務(wù)為空，而事件隊(duì)列中的任務(wù)又分為微隊(duì)列與宏隊(duì)列，當(dāng)微隊(duì)列中的任務(wù)執(zhí)行完后才會去執(zhí)行宏隊(duì)列中的任務(wù)，而在微隊(duì)列任務(wù)執(zhí)行完到宏隊(duì)列任務(wù)開始之前瀏覽器的 GUI 線程會執(zhí)行一次頁面渲染 ( UI rendering )，這也就解釋了為什么在執(zhí)行棧中進(jìn)行大量的計(jì)算時(shí)會阻塞頁面的渲染 ) 。

與同步相對的異步則可以理解為在異步操作完成后所要做的任務(wù)，它們通常以回調(diào)函數(shù)或者 Promise 的形式被放入事件隊(duì)列，再由事件循環(huán) ( Event Loop ) 機(jī)制在每次輪詢時(shí)檢查異步操作是否完成，若完成則按事件隊(duì)列里面的執(zhí)行規(guī)則來依次執(zhí)行相應(yīng)的任務(wù)。也正是得益于事件循環(huán)機(jī)制的存在，才使得異步任務(wù)不會像同步任務(wù)那樣完全阻塞 JS 執(zhí)行線程。

異步操作一般包括 網(wǎng)絡(luò)請求 、文件讀取 、數(shù)據(jù)庫處理

異步任務(wù)一般包括 setTimout / setInterval 、Promise 、requestAnimationFrame ( 瀏覽器獨(dú)有 ) 、setImmediate ( Node 獨(dú)有 ) 、process.nextTick ( Node 獨(dú)有 ) 、etc ...

注意： 在瀏覽器端與在 Node 端的 Event Loop 機(jī)制是有所不同的，下面給出的兩張圖簡要闡述了在不同環(huán)境下事件循環(huán)的運(yùn)行機(jī)制，由于 Event Loop 不是本文內(nèi)容的重點(diǎn)，但是 JS 異步編程又是建立在它的基礎(chǔ)之上的，故在下面給出相應(yīng)的閱讀鏈接，希望能夠幫助到有需要的讀者。

瀏覽器端

Node 端

閱讀鏈接

深入理解 JS 事件循環(huán)機(jī)制 ( 瀏覽器篇 )

深入理解 JS 事件循環(huán)機(jī)制 ( Node.js 篇 )

為異步而生的 JS 語法

回望歷史，在最近幾年里 ECMAScript 標(biāo)準(zhǔn)幾乎每年都有版本的更新，也正是因?yàn)橛邢?ES6 這種在語言特性上大版本的更新，到了現(xiàn)今的 8102 年， JS 中的異步編程相對于那個(gè)只有回調(diào)函數(shù)的遠(yuǎn)古時(shí)代有了很大的進(jìn)步。下面我將介紹 callback 、Promise 、generator 、async / await 的基本用法以及如何在異步編程中使用它們。

callback

回調(diào)函數(shù)并不算是 JS 中的語法但它卻是解決異步編程問題中最常用的一種方法，所以在這里有必要提出來，下面舉一個(gè)例子，大家看一眼就懂。

const foo = function (x, y, cb) {
    setTimeout(() => {
        cb(x + y)
    }, 2000)
}

// 使用 thunk 函數(shù)，有點(diǎn)函數(shù)柯里化的味道，在最后處理 callback。
const thunkify = function (fn) {
    return function () {
        let args = Array.from(arguments)
        return function (cb) {
            fn.apply(null, [...args, cb])
        }
    }
}

let fooThunkory = thunkify(foo)

let fooThunk1 = fooThunkory(2, 8)
let fooThunk2 = fooThunkory(4, 16)

fooThunk1((sum) => {
    console.log(sum) // 10
})

fooThunk2((sum) => {
    console.log(sum) // 20
})

Promise

在 ES6 沒有發(fā)布之前，作為異步編程主力軍的回調(diào)函數(shù)一直被人詬病，其原因有太多比如回調(diào)地獄、代碼執(zhí)行順序難以追蹤、后期因代碼變得十分復(fù)雜導(dǎo)致無法維護(hù)和更新等，而 Promise 的出現(xiàn)在很大程度上改變了之前的窘境。話不多說先直接上代碼提前感受下它的魅力，然后我再總結(jié)下自己認(rèn)為在 Promise 中很重要的幾個(gè)點(diǎn)。

const foo = function () {
    let args = [...arguments]
    let cb = args.pop()
    setTimeout(() => {
        cb(...args)
    }, 2000)
}

const promisify = function (fn) {
    return function () {
        let args = [...arguments]
        return function (cb) {
            return new Promise((resolve, reject) => {
                fn.apply(null, [...args, resolve, reject, cb])
            })
        }
    }
}

const callback = function (x, y, isAdd, resolve, reject) {
    if (isAdd) {
        resolve(x + y)
    } else {
        reject("Add is not allowed.")
    }
}

let promisory = promisify(foo)

let p1 = promisory(4, 16, false)
let p2 = promisory(2, 8, true)

p1(callback)
.then((sum) => {
    console.log(sum)
}, (err) => {
    console.error(err) // Add is not allowed.
})
.finally(() => {
    console.log("Triggered once the promise is settled.")
})

p2(callback)
.then((sum) => {
    console.log(sum) // 10
    return "evil