// 示例
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 分为两个阶段：词法分析和 语法分析
词法分析
词法分析阶段把字符串形式的代码转换为令牌（tokens） ，可以把tokens看作是一个扁平的语法片段数组，描述了代码片段在整个代码中的位置和记录当前值的一些信息
比如let a = 1，对应的AST是这样的
语法分析
语法分析阶段会把token转换成 AST 的形式，这个阶段会使用token中的信息把它们转换成一个 AST 的表述结构，使用type属性记录当前的类型
例如 let 代表着一个变量声明的关键字，所以它的 type 为 VariableDeclaration，而 a = 1 会作为 let 的声明描述，它的 type 为 VariableDeclarator
AST在线查看工具：AST explorer
再举个🌰，加深对AST的理解
function demo(n) {
return n * n;
}
复制代码
转化成AST的结构
{
"type": "Program", // 整段代码的主体
"body": [
{
"type": "FunctionDeclaration", // function 的类型叫函数声明；
"id": { // id 为函数声明的 id
"type": "Identifier", // 标识符 类型
"name": "demo" // 标识符 具有名字
},
"expression": false,
"generator": false,
"async": false, // 代表是否 是 async function
"params": [ // 同级 函数的参数
{
"type": "Identifier",// 参数类型也是 Identifier
"name": "n"
}
],
"body": { // 函数体内容 整个格式呈现一种树的格式
"type": "BlockStatement", // 整个函数体内容 为一个块状代码块类型
"body": [
{
"type": "ReturnStatement", // return 类型
"argument": {
"type": "BinaryExpression",// BinaryExpression 二进制表达式类型
"start": 30,
"end": 35,
"left": { // 分左 右 中 结构
"type": "Identifier",
"name": "n"
},
"operator": "*", // 属于操作符
"right": {
"type": "Identifier",
"name": "n"
}
}
}
]
}
}],
"sourceType": "module"
}
