嘿，不要給 async 函數寫那麼多 try

轉發鏈接：https://juejin.im/post/5d25b39bf265da1bb67a4176

前言

在開發中，你是否會為了系統健壯性，亦或者是為了捕獲異步的錯誤，而頻繁的在 async 函數中寫 try/catch 的邏輯？

<code>async function func() {
    try {
        let res = await asyncFunc()
    } catch (e) {
      //......
    }
}
複製代碼/<code>

曾經我在《 》中提到過一個優雅處理 async/await 的方法

這樣我們就可以使用一個輔助函數包裹這個 async 函數實現錯誤捕獲

<code>async function func() {
    let [err, res] = await errorCaptured(asyncFunc)
    if (err) {
        //... 錯誤捕獲
    }
    //...
}
複製代碼/<code>

但是這麼做有一個缺陷就是每次使用的時候，都要引入 errorCaptured 這個輔助函數，有沒有“懶”的方法呢？

答案肯定是有的，我在那篇博客後提出了一個新的思路，可以通過一個 webpack loader 來自動注入 try/catch 代碼，最後的結果希望是這樣的

<code>// development
async function func() {
   let res = await asyncFunc()
    //...其他邏輯
}

// release
async function func() {
    try {
        let res = await asyncFunc()
    } catch (e) {
      //......
    }
    //...其他邏輯
}
複製代碼/<code>

是不是很棒？在開發環境中不需要任何多餘的代碼，讓 webpack 自動給生產環境的代碼注入錯誤捕獲的邏輯，接下來我們來逐步實現這個 loader

loader 原理

在實現這個 webpack loader 之前，先簡要介紹一下 loader 的原理，我們在 webpack 中定義的一個個 loader，本質上只是一個函數，在定義 loader 同時還會定義一個 test 屬性，webpack 會遍歷所有的模塊名，當匹配 test 屬性定義的正則時，會將這個模塊作為 source 參數傳入 loader 中執行

<code>{
    test: /\\.vue$/,
    use: "vue-loader",
}
複製代碼/<code>

當匹配到 .vue 結尾的文件名時，會將文件作為 source 參數傳給 vue-loader，use 屬性後面可以是一個字符串也可以是一個路徑，當是字符串時默認會視為 nodejs 模塊去 node_modules 中找

而這些文件本質上其實就是字符串（圖片，視頻就是 Buffer 對象），以 vue-loader 為例，當 loader 接受到文件時，通過字符串匹配將其分為 3 份，模版字符串會 vue-loader 編譯為 render 函數，script 部分會交給 babel-loader，style 部分會交給 css-loader，同時 loader 遵守單一原則，即一個 loader 只做一件事，這樣可以靈活組合多個 loader，互不干擾

實現思路

因為 loader 可以讀取匹配到的文件，經過處理變成期望的輸出結果，所以我們可以自己實現一個 loader，接受 js 文件，當遇到 await 關鍵字時，給代碼包裹一層 try/catch

那麼如何能夠準確給 await 及後面的表達式包裹 try/catch 呢？這裡需要用到抽象語法樹（AST）相關的知識

AST

抽象語法樹是源代碼語法結構的一種抽象表示。它以樹狀的形式表現編程語言的語法結構，樹上的每個節點都表示源代碼中的一種結構

通過 AST 可以實現很多非常有用的功能，例如將 ES6 以後的代碼轉為 ES5，eslint 的檢查，代碼美化，甚至 js 引擎都是依賴 AST 實現的，同時因為代碼本質只是單純的字符串，所以並不僅限於 js 之間的轉換，scss，less 等 css 預處理器也是通過 AST 轉為瀏覽器認識的 css 代碼，我們來舉個例子

<code>let a = 1
let b = a + 5
複製代碼/<code>

將其轉換為抽象語法樹後是這樣的

將字符串轉為 AST 樹需要經過詞法分析和語法分析兩步

詞法分析將一個個代碼片段轉為 token （詞法單元），去除空格註釋，例如第一行會將 let，a，=，1 這 4 個轉為 token，token 是一個對象，描述了代碼片段在整個代碼中的位置和記錄當前值的一些信息

語法分析會將 token 結合當前語言（JS）的語法轉換成 Node（節點），同時 Node 包含一個 type 屬性記錄當前的類型，例如 let 在 JS 中代表著一個變量聲明的關鍵字，所以它的 type 為 VariableDeclaration，而 a = 1 會作為 let 的聲明描述，它的 type 為 VariableDeclarator，而聲明描述是依賴於變量聲明的，所以是一種上下的層級關係

另外可以發現並不是一個 token 對應一個 Node，等號左右必須都有值才能組成一個聲明語句，否則會作出警告，這就是 eslint 的基本原理。最後所有的 Node 組合在一起就形成了 AST 語法樹

推薦一個很實用的 AST 查看工具，AST explorer，更直觀的查看代碼是如何轉為抽象語法樹

回到代碼的實現，我們只需要通過 AST 樹找到 await 表達式，將 await 外面包裹一層 try/catch 的 Node 節點即可

<code>async function func() {
   await asyncFunc()
}
複製代碼/<code>

對應 AST 樹：

<code>async function func() {
    try {
        await asyncFunc()
    } catch (e) {
        console.log(e)
    }
}
複製代碼/<code>

對應 AST 樹：

loader 開發

有了具體的思路，接下來我們開始編寫 loader，當我們的 loader 接收到 source 文件時，通過 @babel/parser 這個包可以將文件轉換為 AST 抽象語法樹，那麼如何找到對應的 await 表達式呢？

這就需要另外一個 babel 的包 @babel/traverse，通過 @babel/traverse 可以傳入一個 AST 樹和一些鉤子函數，隨後深度遍歷傳入的 AST 樹，當遍歷的節點和鉤子函數的名字相同時，會執行對應的回調

<code>const parser = require("@babel/parser")
const traverse = require("@babel/traverse").default

module.exports = function (source) {
    let ast = parser.parse(source)

    traverse(ast, {
        AwaitExpression(path) {
            //... 
        }
    })
    //...
}
複製代碼/<code>

通過 @babel/traverse 我們能夠輕鬆的找到 await 表達式對應的 Node 節點，接下來就是創建一個類型為 TryStatement 的 Node 節點，最後 await 放入其中。這裡還需要依賴另外一個包 @babel/types，可以理解為 babel 版的 loadsh 庫，它提供了很多和 AST 的 Node 節點相關的輔助函數，我們需要用到其中的 tryStatement 方法，即創建一個 TryStatement 的 Node 節點

<code>const parser = require("@babel/parser")
const traverse = require("@babel/traverse").default
const t = require("@babel/types")

module.exports = function (source) {
    let ast = parser.parse(source)

    traverse(ast, {
        AwaitExpression(path) {
            let tryCatchAst = t.tryStatement(
                //...
            )
            //...
        }
    })
}

複製代碼/<code>

tryStatement 接受 3 個參數，第一個是 try 子句，第二個是 catch 子句，第三個是 finally 子句，一個完整的 try/catch 語句對應的 Node 節點看起來像這樣

<code>const parser = require("@babel/parser")
const traverse = require("@babel/traverse").default
const t = require("@babel/types")

const parser = require("@babel/parser")
const traverse = require("@babel/traverse").default
const t = require("@babel/types")

module.exports = function (source) {
    let ast = parser.parse(source)

    traverse(ast, {
        AwaitExpression(path) {
            let tryCatchAst = t.tryStatement(
                // try 子句（必需項）
                t.blockStatement([
                    t.expressionStatement(path.node)
                ]),
                // catch 子句
                t.catchClause(
                    //...
                )
            ) 

            path.replaceWithMultiple([
                tryCatchAst
            ])
        }
    })
      //...
}

複製代碼/<code>

使用 blockStatement ，expressionStatement 方法創建一個塊級作用域和承載 await 表達式的 Node 節點，@babel/traverse 會給每個鉤子函數傳入一個 path 參數，包含了當前遍歷的一些信息，例如當前節點，上個遍歷的 path 對象和對應的節點，最重要的是裡面有一些可以操作 Node 節點的方法，我們需要使用到 replaceWithMultiple 這個方法來將當前的 Node 節點替換為 try/catch 語句的 Node 節點

另外我們要考慮到 await 表達式可能是是作為一個聲明語句

<code> let res = await asyncFunc()
複製代碼/<code>

也有可能是一個賦值語句

<code> res = await asyncFunc()
複製代碼/<code>

還有可能只是一個單純的表達式

<code> await asyncFunc()
複製代碼/<code>

這 3 種情況對應的 AST 也是不一樣的，所以我們需要對其分別處理，@bable/types 提供了豐富的判斷函數，在 AwaitExpression 鉤子函數中，我們只需要判斷上級節點是哪種類型的 Node 節點即可，另外也可以通過 AST explorer 來查看最終需要生成的 AST 樹的結構

<code>const parser = require("@babel/parser")
const traverse = require("@babel/traverse").default
const t = require("@babel/types")

module.exports = function (source) {
    let ast = parser.parse(source)

    traverse(ast, {
        AwaitExpression(path) {
            if (t.isVariableDeclarator(path.parent)) { // 變量聲明
                let variableDeclarationPath = path.parentPath.parentPath
                let tryCatchAst = t.tryStatement(
                    t.blockStatement([
                        variableDeclarationPath.node // Ast
                    ]),
                    t.catchClause(
                        //...
                    )
                )
                variableDeclarationPath.replaceWithMultiple([
                    tryCatchAst
                ])
            } else if (t.isAssignmentExpression(path.parent)) { // 賦值表達式
                let expressionStatementPath = path.parentPath.parentPath
                let tryCatchAst = t.tryStatement(
                    t.blockStatement([
                        expressionStatementPath.node
                    ]),
                    t.catchClause(
                        //...
                    )
                )
                expressionStatementPath.replaceWithMultiple([
                    tryCatchAst
                ])
            } else { // await 表達式
                let tryCatchAst = t.tryStatement(
                    t.blockStatement([
                        t.expressionStatement(path.node)
                    ]),
                    t.catchClause(
                        //...
                    )
                )
                path.replaceWithMultiple([
                    tryCatchAst
                ])
            } 

        }
    })
      //...
}
複製代碼/<code>

在拿到替換後的 AST 樹後，使用 @babel/core 包中的 transformFromAstSync 方法將 AST 樹重新轉為對應的代碼字符串返回即可

<code>const parser = require("@babel/parser")
const traverse = require("@babel/traverse").default
const t = require("@babel/types")
const core = require("@babel/core")

module.exports = function (source) {
    let ast = parser.parse(source)

    traverse(ast, {
        AwaitExpression(path) {
              // 同上
        }
    })
    return core.transformFromAstSync(ast).code
}
複製代碼/<code>

在這基礎上還暴露了一些 loader 配置項以提高易用性，例如如果 await 語句已經被 try/catch 包裹則不會再次注入，其原理也是基於 AST，利用 path 參數的 findParent 方法向上遍歷所有父節點，判斷是否被 try/catch 的 Node 包裹

<code>traverse(ast, {
    AwaitExpression(path) {
        if (path.findParent((path) => t.isTryStatement(path.node))) return
        // 處理邏輯
    }
})
複製代碼/<code>

另外 catch 子句中的代碼片段也支持自定義，這樣使得所有錯誤都使用統一邏輯處理，原理是將用戶配置的代碼片段轉為 AST，在 TryStatement 節點被創建的時候作為參數傳入其 catch 節點

進一步改進

經過評論區的交流，我將默認給每個 await 語句添加一個 try/catch，修改為給整個 async 函數包裹 try/catch，原理是先找到 await 語句，然後遞歸向上遍歷

當找到 async 函數時，創建一個 try/catch 的 Node 節點，並將原來 async 函數中的代碼作為 Node 節點的子節點，並替換 async 函數的函數體

當遇到 try/catch，說明已經被 try/catch 包裹，取消注入，直接退出遍歷，這樣當用戶有自定義的錯誤捕獲代碼就不會執行 loader 默認的捕獲邏輯了

對應 AST 樹:

對應 AST 樹：

這只是最基本的 async 函數聲明的 node 節點，另外還有函數表達式，箭頭函數，作為對象的方法等這些表現形式，當滿足其中一種情況就注入 try/catch 代碼塊

<code>// 函數表達式
const func = async function () {
    await asyncFunc()
}

// 箭頭函數
const func2 = async () => {
    await asyncFunc()
}

// 方法
const vueComponent = {
    methods: {
        async func() {
            await asyncFunc()
        }
    }
}
複製代碼/<code>

總結

本文意在拋磚引玉，在日常開發過程中，可以結合自己的業務線，開發更加適合自己的 loader，例如技術棧是 jQuery 的老項目，可以匹配 $.ajax 的 Node 節點，統一注入錯誤處理邏輯，甚至可以自定義一些 ECMA 沒有的新語法

抱歉，懂編譯原理，真的是可以為所欲為

通過開發這個 loader 不僅可以學習到 webpack loader 是如何運行的，同時瞭解很多 AST 方面的知識，瞭解 babel 的原理，更多的方法可以查看babel 的官方文檔或者 babel 手書

關於這個 loader 我已經發布到 npm 上，有興趣的朋友可以直接調用 npm install async-catch-loader -D 安裝和研究，使用方法和一般 loader 一樣，記得放在 babel-loader 後面，以便優先執行，將注入後的結果繼續交給 babel 轉義

<code>{
    test: /\\.js$/,
    use: [
        "babel-loader?cacheDirectory=true",
        'async-catch-loader'
    ]
}
複製代碼/<code>

同時本文對您有收穫的話，希望能點個 star，非常感謝~

作者：yeyan1996
轉發鏈接：https://juejin.im/post/5d25b39bf265da1bb67a4176

閱讀更多 Echa攻城獅 的文章

關鍵字: Node.js 瀏覽器 健壯性