如何给所有的async函数添加try/catch?

前言

阿里三面的时候被问到了这个问题,当时思路虽然正确,可惜表述的不够清晰

后来花了一些时间整理了下思路,那么如何实现给所有的async函数添加try/catch呢?

async如果不加 try/catch 会发生什么事?

async function fn() {
  let value = await new Promise((resolve, reject) => {
    reject('failure');
  });
  console.log('do something...');
}
fn()

导致浏览器报错:一个未捕获的错误

在开发过程中,为了保证系统健壮性,或者是为了捕获异步的错误,需要频繁的在 async 函数中添加 try/catch,避免出现上述示例的情况

可是我很懒,不想一个个加,懒惰使我们进步😂

下面,通过手写一个babel 插件,来给所有的async函数添加try/catch

babel插件的最终效果

原始代码:

async function fn() {
  await new Promise((resolve, reject) => reject('报错'));
  await new Promise((resolve) => resolve(1));
  console.log('do something...');
}
fn();

使用插件转化后的代码:

async function fn() {
  try {
    await new Promise((resolve, reject) => reject('报错'));
    await new Promise(resolve => resolve(1));
    console.log('do something...');
  } catch (e) {
    console.log("\nfilePath: E:\\myapp\\src\\main.js\nfuncName: fn\nError:", e);
  }
}
fn();

打印的报错信息:

通过详细的报错信息,帮助我们快速找到目标文件和具体的报错方法,方便去定位问题

babel插件的实现思路

1)借助AST抽象语法树,遍历查找代码中的await关键字

2)找到await节点后,从父路径中查找声明的async函数,获取该函数的body(函数中包含的代码)

3)创建try/catch语句,将原来async的body放入其中

4)最后将async的body替换成创建的try/catch语句

babel的核心:AST

先聊聊 AST 这个帅小伙🤠,不然后面的开发流程走不下去

AST是代码的树形结构,生成 AST 分为两个阶段:**词法分析**[1]和 **语法分析**[2]

词法分析

词法分析阶段把字符串形式的代码转换为令牌(tokens) ,可以把tokens看作是一个扁平的语法片段数组,描述了代码片段在整个代码中的位置和记录当前值的一些信息

比如let a = 1,对应的AST是这样的

语法分析

语法分析阶段会把token转换成 AST 的形式,这个阶段会使用token中的信息把它们转换成一个 AST 的表述结构,使用type属性记录当前的类型

例如 let 代表着一个变量声明的关键字,所以它的 type 为 VariableDeclaration,而 a = 1 会作为 let 的声明描述,它的 type 为 VariableDeclarator

AST在线查看工具:**AST explorer**[3]

再举个🌰,加深对AST的理解

function demo(n) {
  return n * n;
}

转化成AST的结构

{
  "type": "Program", 
  "body": [
    {
      "type": "FunctionDeclaration", 
      "id": { 
        "type": "Identifier", 
        "name": "demo" 
      },
      "expression": false,
      "generator": false,
      "async": false, 
      "params": [ 
        {
          "type": "Identifier",
          "name": "n"
        }
      ],
      "body": { 
        "type": "BlockStatement", 
        "body": [
          {
            "type": "ReturnStatement", 
            "argument": {
              "type": "BinaryExpression",
              "start": 30,
              "end": 35,
              "left": { 
                "type": "Identifier", 
                "name": "n"
              },
              "operator": "*", 
              "right": {
                "type": "Identifier",
                "name": "n"
              }
            }
          }
        ]
      }
    }
  ],
  "sourceType": "module"
}

常用的 AST 节点类型对照表

类型原名称中文名称描述
Program程序主体整段代码的主体
VariableDeclaration变量声明声明一个变量,例如 var let const
FunctionDeclaration函数声明声明一个函数,例如 function
ExpressionStatement表达式语句通常是调用一个函数,例如 console.log()
BlockStatement块语句包裹在 {} 块内的代码,例如 if (condition){var a = 1;}
BreakStatement中断语句通常指 break
ContinueStatement持续语句通常指 continue
ReturnStatement返回语句通常指 return
SwitchStatementSwitch 语句通常指 Switch Case 语句中的 Switch
IfStatementIf 控制流语句控制流语句,通常指 if(condition){}else{}
Identifier标识符标识,例如声明变量时 var identi = 5 中的 identi
CallExpression调用表达式通常指调用一个函数,例如 console.log()
BinaryExpression二进制表达式通常指运算,例如 1+2
MemberExpression成员表达式通常指调用对象的成员,例如 console 对象的 log 成员
ArrayExpression数组表达式通常指一个数组,例如 [1, 3, 5]
FunctionExpression函数表达式例如const func = function () {}
ArrowFunctionExpression箭头函数表达式例如const func = ()=> {}
AwaitExpressionawait表达式例如let val = await f()
ObjectMethod对象中定义的方法例如 let obj = { fn () {} }
NewExpressionNew 表达式通常指使用 New 关键词
AssignmentExpression赋值表达式通常指将函数的返回值赋值给变量
UpdateExpression更新表达式通常指更新成员值,例如 i++
Literal字面量字面量
BooleanLiteral布尔型字面量布尔值,例如 true false
NumericLiteral数字型字面量数字,例如 100
StringLiteral字符型字面量字符串,例如 vansenb
SwitchCaseCase 语句通常指 Switch 语句中的 Case

await节点对应的AST结构

1)原始代码

async function fn() {
   await f()
}

对应的AST结构

2)增加try catch后的代码

async function fn() {
    try {
        await f()
    } catch (e) {
        console.log(e)
    }
}

对应的AST结构

通过AST结构对比,插件的核心就是将原始函数的body放到try语句中

babel插件开发

我曾在《「历时8个月」10万字前端知识体系总结(工程化篇)🔥》[4]中聊过如何开发一个babel插件

这里简单回顾一下

插件的基本格式示例

module.exports = function (babel) {
   let t = babel.type
   return { 
     visitor: {
       
       CallExression: (path, state) => { 
         do soming ……
       }
     }
   }
 }

1)通过 babel 拿到 types 对象,操作 AST 节点,比如创建、校验、转变等

2)visitor:定义了一个访问者,可以设置需要访问的节点类型,当访问到目标节点后,做相应的处理来实现插件的功能

寻找await节点

回到业务需求,现在需要找到await节点,可以通过AwaitExpression表达式获取

module.exports = function (babel) {
   let t = babel.type
   return { 
     visitor: {
       
       AwaitExpression(path) {
         
         let node = path.node;
       }
     }
   }
 }

向上查找 async 函数

通过findParent方法,在父节点中搜寻 async 节点

// async节点的属性为true
const asyncPath = path.findParent(p => p.node.async)

async 节点的AST结构

这里要注意,async 函数分为4种情况:函数声明 、箭头函数 、函数表达式 、函数为对象的方法

async function fn() {
  await f()
}


const fn = async function () {
  await f()
};


const fn = async () => {
  await f()
};


const obj = {
  async fn() {
      await f()
  }
}

需要对这几种情况进行分别判断

module.exports = function (babel) {
   let t = babel.type
   return { 
     visitor: {
       
       AwaitExpression(path) {
         
         let node = path.node;
         
         const asyncPath = path.findParent((p) => p.node.async && (p.isFunctionDeclaration() || p.isArrowFunctionExpression() || p.isFunctionExpression() || p.isObjectMethod()));
       }
     }
   }
 }

利用babel-template生成try/catch节点

babel-template[5]可以用以字符串形式的代码来构建AST树节点,快速优雅开发插件

// 引入babel-template
const template = require('babel-template')

// 定义try/catch语句模板
let tryTemplate = `
try {
} catch (e) {
console.log(CatchError:e)
}`

// 创建模板
const temp = template(tryTemplate)

// 给模版增加key,添加console.log打印信息
let tempArgumentObj = {
   // 通过types.stringLiteral创建字符串字面量
   CatchError: types.stringLiteral('Error')
}

// 通过temp创建try语句的AST节点
let tryNode = temp(tempArgumentObj)

async函数体替换成try语句

module.exports = function (babel) {
   let t = babel.type
   return { 
     visitor: {
       AwaitExpression(path) {
         let node = path.node
         const asyncPath = path.findParent((p) => p.node.async && (p.isFunctionDeclaration() || p.isArrowFunctionExpression() || p.isFunctionExpression() || p.isObjectMethod()))
         
         let tryNode = temp(tempArgumentObj)
         
         // 获取父节点的函数体body
         let info = asyncPath.node.body

         // 将函数体放到try语句的body中
         tryNode.block.body.push(...info.body)

         // 将父节点的body替换成新创建的try语句
         info.body = [tryNode]
       }
     }
   }
 }

到这里,插件的基本结构已经成型,但还有点问题,如果函数已存在try/catch,该怎么处理判断呢?

若函数已存在try/catch,则不处理

async function fn() {
    try {
        await f()
    } catch (e) {
        console.log(e)
    }
}

通过isTryStatement判断是否已存在try语句

module.exports = function (babel) {
   let t = babel.type
   return { 
     visitor: {
       AwaitExpression(path) {
       
        // 判断父路径中是否已存在try语句,若存在直接返回
        if (path.findParent((p) => p.isTryStatement())) {
          return false
        }
       
         let node = path.node
         const asyncPath = path.findParent((p) => p.node.async && (p.isFunctionDeclaration() || p.isArrowFunctionExpression() || p.isFunctionExpression() || p.isObjectMethod()))
         let tryNode = temp(tempArgumentObj)
         let info = asyncPath.node.body
         tryNode.block.body.push(...info.body)
         info.body = [tryNode]
       }
     }
   }
 }

添加报错信息

获取报错时的文件路径 filePath 和方法名称 funcName,方便快速定位问题

获取文件路径

const filePath = this.filename || this.file.opts.filename || 'unknown';

获取报错的方法名称

// 定义方法名
let asyncName = ''

// 获取async节点的type类型
let type = asyncPath.node.type

switch (type) {
// 1️⃣函数表达式
// 情况1:普通函数,如const func = async function () {}
// 情况2:箭头函数,如const func = async () => {}
case 'FunctionExpression':
case 'ArrowFunctionExpression':
  // 使用path.getSibling(index)来获得同级的id路径
  let identifier = asyncPath.getSibling('id')
  // 获取func方法名
  asyncName = identifier && identifier.node ? identifier.node.name : ''
  break

// 2️⃣函数声明,如async function fn2() {}
case 'FunctionDeclaration':
  asyncName = (asyncPath.node.id && asyncPath.node.id.name) || ''
  break

// 3️⃣async函数作为对象的方法,如vue项目中,在methods中定义的方法: methods: { async func() {} }
case 'ObjectMethod':
  asyncName = asyncPath.node.key.name || ''
  break
}

// 若asyncName不存在,通过argument.callee获取当前执行函数的name
let funcName = asyncName || (node.argument.callee && node.argument.callee.name) || ''

添加用户选项

用户引入插件时,可以设置excludeincludecustomLog选项

exclude: 设置需要排除的文件,不对该文件进行处理

include: 设置需要处理的文件,只对该文件进行处理

customLog: 用户自定义的打印信息

最终代码

入口文件index.js

const template = require('babel-template');

const { tryTemplate, catchConsole, mergeOptions, matchesFile } = require('./util');

module.exports = function (babel) {
  
  let types = babel.types;

  
  const visitor = {
    AwaitExpression(path) {
      
      if (this.opts && !typeof this.opts === 'object') {
        return console.error('[babel-plugin-await-add-trycatch]: options need to be an object.');
      }

      
      if (path.findParent((p) => p.isTryStatement())) {
        return false;
      }

      
      const options = mergeOptions(this.opts);

      
      const filePath = this.filename || this.file.opts.filename || 'unknown';

      
      if (matchesFile(options.exclude, filePath)) {
        return;
      }

      
      if (options.include.length && !matchesFile(options.include, filePath)) {
        return;
      }

      
      let node = path.node;

      
      
      const asyncPath = path.findParent((p) => p.node.async && (p.isFunctionDeclaration() || p.isArrowFunctionExpression() || p.isFunctionExpression() || p.isObjectMethod()));

      
      let asyncName = '';

      let type = asyncPath.node.type;

      switch (type) {
        
        
        
        case 'FunctionExpression':
        case 'ArrowFunctionExpression':
          
          let identifier = asyncPath.getSibling('id');
          
          asyncName = identifier && identifier.node ? identifier.node.name : '';
          break;

        
        case 'FunctionDeclaration':
          asyncName = (asyncPath.node.id && asyncPath.node.id.name) || '';
          break;

        
        case 'ObjectMethod':
          asyncName = asyncPath.node.key.name || '';
          break;
      }

      
      let funcName = asyncName || (node.argument.callee && node.argument.callee.name) || '';

      const temp = template(tryTemplate);

      
      let tempArgumentObj = {
        
        CatchError: types.stringLiteral(catchConsole(filePath, funcName, options.customLog))
      };

      
      let tryNode = temp(tempArgumentObj);

      
      let info = asyncPath.node.body;

      
      tryNode.block.body.push(...info.body);

      
      info.body = [tryNode];
    }
  };
  return {
    name: 'babel-plugin-await-add-trycatch',
    visitor
  };
};


util.js

const merge = require('deepmerge');


let tryTemplate = `
try {
} catch (e) {
console.log(CatchError,e)
}`;


 * catch要打印的信息
 * @param {string} filePath - 当前执行文件的路径
 * @param {string} funcName - 当前执行方法的名称
 * @param {string} customLog - 用户自定义的打印信息
 */
let catchConsole = (filePath, funcName, customLog) => `
filePath: ${filePath}
funcName: ${funcName}
${customLog}:`;


const defaultOptions = {
  customLog: 'Error',
  exclude: ['node_modules'],
  include: []
};


function matchesFile(list, filename) {
  return list.find((name) => name && filename.includes(name));
}


function mergeOptions(options) {
  let { exclude, include } = options;
  if (exclude) options.exclude = toArray(exclude);
  if (include) options.include = toArray(include);
  
  return merge.all([defaultOptions, options]);
}

function toArray(value) {
  return Array.isArray(value) ? value : [value];
}

module.exports = {
  tryTemplate,
  catchConsole,
  defaultOptions,
  mergeOptions,
  matchesFile,
  toArray
};


github仓库[6]

babel插件的安装使用

npm网站搜索babel-plugin-await-add-trycatch

总结

通过开发这个插件,了解很多 AST 方面的知识,掌握了一些 babel 的原理

友情提醒:不要在生产环境中使用该插件,该插件的功能还太过简陋。实际开发中,大家可以结合具体的业务需求开发自己的插件,一起动手玩一玩 babel

最后

如果你现在正在找工作,可以私信“web”进群领取前端面试小册以及更多阿里、字节大厂面试真题合集,和p8大佬一起交流。

  • 27
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Web面试那些事儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值