3)创建try/catch语句,将原来async的body放入其中 4)最后将async的body替换成创建的try/catch语句 babel的核心:AST 先聊聊 AST 这个帅小伙 ,不然后面的开发流程走不下去 AST是代码的树形结构,生成 AST 分为两个阶段:词法分析和语法分析 词法分析 词法分析阶段把字符串形式的代码转换为令牌(tokens),可以把tokens看作...
如果第一个异步操作成功,就会执行try代码块中的内容;如果发生异常,就会跳转到catch代码块中处理错误。 在try代码块中,又嵌套了另一个try、catch语句来处理第二个异步操作。这样可以分别处理每个异步操作可能发生的异常。 需要注意的是,嵌套的try、catch和async、await请求可以根据实际情况进行多层嵌套。在每个try代码块...
下面,通过手写一个babel 插件,来给所有的async函数添加try/catch babel插件的最终效果 原始代码: asyncfunctionfn() { awaitnewPromise((resolve, reject) =>reject('报错')); awaitnewPromise((resolve) =>resolve(1)); console.log('do something...'); } fn(); 复制代码 使用插件转化后的代码: asyncfu...
一般我们在项目里都是用 axios 或者 fetch 之类发送请求,会对其进行一个封装,也可以在里面进行 catch 操作,对错误信息先一步处理,至于是否需要 reject,就看你是否想要在 await 命令异常时候中断了;不使用 reject 则不会中断,但是需要每个接口拿到 response 后先 非空校验, 使用 reject 则会在异常处中断,并且会在...
下面,通过手写一个babel 插件,来给所有的async函数添加try/catch babel插件的最终效果 原始代码: asyncfunctionfn() { awaitnewPromise((resolve, reject) =>reject('报错')); awaitnewPromise((resolve) =>resolve(1)); console.log('do something...'); ...
1.明确的错误处理:try/catch可以在每个可能出错的地方进行错误捕获,提供清晰的错误处理逻辑。 2.可读性和维护性:虽然代码略显冗长,但try/catch的使用使得错误处理逻辑更加集中和明确,有助于代码的阅读和维护。 3.灵活性:try/catch允许我们在捕获错误时,进行灵活的处理,如记录日志、重试操作等。
} catch (e) { console.log(e) } } 对应AST 树: loader 开发 有了具体的思路,接下来我们开始编写 loader,当我们的 loader 接收到 source 文件时,通过@babel/parser这个包可以将文件转换为 AST 抽象语法树,那么如何找到对应的 await 表达式呢? 这就需要另外一个 babel 的包@babel/traverse,通过@babel/traver...
执行后会在 catch 里捕获请求异常,然后 getUserInfo 函数中断执行,这是符合逻辑的,对于有依赖关系的接口,中断执行可以避免程序崩溃,这里唯一的问题是 try catch 貌似占据了太多行数,如果每个接口都写的话看起来略显冗余。 示例2:直接 catch 鉴于正常情况下,a...
在开发中,你是否会为了系统健壮性,亦或者是为了捕获异步的错误,而频繁的在 async 函数中写 try/catch 的逻辑? 代码语言:javascript 复制 asyncfunctionfunc(){try{letres=awaitasyncFunc()}catch(e){//...}}复制代码 曾经我在《一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧》中提到过一个优雅...
回到代码的实现,我们只需要通过 AST 树找到 await 表达式,将 await 外面包裹一层 try/catch 的 Node 节点即可 asyncfunctionfunc(){awaitasyncFunc()} 对应AST 树: image.png asyncfunctionfunc(){try{awaitasyncFunc()}catch(e){console.log(e)}} ...