网站加载慢图片做延时加载有用,取消网站的通知书,网页游戏平台返利,汕头seo代理大家好#xff0c;我是若川。持续组织了5个月源码共读活动#xff0c;感兴趣的可以点此加我微信 ruochuan12 参与#xff0c;每周大家一起学习200行左右的源码#xff0c;共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。这是源码共读活动第… 大家好我是若川。持续组织了5个月源码共读活动感兴趣的可以点此加我微信 ruochuan12 参与每周大家一起学习200行左右的源码共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。这是源码共读活动第21期 await-to-js优雅的处理 async await 的 try-catch读者掘金爱嘿嘿的小黑 的投稿。1前言学而不思则罔最近有在读一些比较优秀的npm包的代码,起因是感觉自己现在写的代码还是不够规范,不够简洁。可是我又不知道到底什么样的代码才算是比较好的代码,在进行一番思考过后我认为还是要站在巨人的肩膀上。通过阅读优秀的源码并从中学习如何写出让人觉得赏心悦目的代码最后再写文进行章总结对整个学习的过程进行一个梳理同时分享给其他人。为什么要在开头写这么多呢因为我需要为自己坚持下去找一个理由。这样我才能乘风破浪,一往无前。话不多说,开始总结。2JS异步编程进化之路回调地狱阶段在正式介绍await-to-js这个库之前,让我们先简单的回顾一下有关于在JavaScript这门语言中,异步编程的进化之路。在Promise没出现之前,异步编程一直是困扰着前端工程师的一个大难题,当时的前辈可能会经常看到下面这种代码。function AsyncTask() {asyncFuncA(function(err, resultA){if(err) return cb(err);asyncFuncB(function(err, resultB){if(err) return cb(err);asyncFuncC(function(err, resultC){if(err) return cb(err);// And so it goes....});});});
}这种同时在纵向和横向延伸的回调中嵌套着回调的代码又被称为回调地狱。可见这玩意让人多么恶心,具体来说有以下这几个缺点难以维护(看都不想看,还维护个**)难以捕捉到错误(一个一个找?) 总而言之,这个问题在当时是很需要被解决的,所以在ES6中,出现了Promise。Promise阶段Promise是一种优雅的异步编程解决方案。从语法上来将,它是一个对象, 代表着一个异步操作最终完成或失败,从语意上来讲,它是承诺,承诺过一段时间给你一个结果。由于它的原型存在then,catch,finally会返回一个新的promise所以可以允许我们链式调用,解决了传统的回调地狱的问题。由于它本身存在all方法,所以可以支持多个并发请求,获取并发请求中数据。有了Promise后,上面的代码可以被写成下面这样。function asyncTask(cb) {asyncFuncA.then(AsyncFuncB).then(AsyncFuncC).then(AsyncFuncD).then(data cb(null, data).catch(err cb(err));
}相比较于上面的回调地狱,使用Promise可以帮助我们让代码只在纵向发展,并且提供了处理错误的回调。显然优雅了很多。不过就算Promise已经这么优秀了,可是依然存在两个每种不足的地方不够同步(代码依然会纵向延伸)不能给每一次异步操作都进行错误处理 这也就是为什么ES7中会出现async/await,号称异步编程的最后解决方案的原因了。async/awaitasync 函数是 Generator 函数的语法糖。使用 关键字 async 来表示在函数内部使用 await 来表示异步。相较于 Generatorasync 函数的改进在于下面四点内置执行器。Generator 函数的执行必须依靠执行器而 async 函数自带执行器调用方式跟普通函数的调用一样更好的语义。async 和 await 相较于 * 和 yield 更加语义化更广的适用性。co 模块约定yield 命令后面只能是 Thunk 函数或 Promise对象。而 async 函数的 await 命令后面则可以是 Promise 或者 原始类型的值Numberstringboolean但这时等同于同步操作返回值是 Promise。async 函数返回值是 Promise 对象比 Generator 函数返回的 Iterator 对象方便可以直接使用 then() 方法进行调用此处总结参考自理解async/await[1]有了async/await,上面的代码可以被改写成下面这样function async asyncTask(cb) {const asyncFuncARes await asyncFuncA()const asyncFuncBRes await asyncFuncB(asyncFuncARes)const asyncFuncCRes await asyncFuncC(asyncFuncBRes)
}同时我们可以对每一次异步操作进行错误处理function async asyncTask(cb) {try {const asyncFuncARes await asyncFuncA()} catch(error) {return new Error(error)}try {const asyncFuncBRes await asyncFuncB(asyncFuncARes)} catch(error) {return new Error(error)}try {const asyncFuncCRes await asyncFuncC(asyncFuncBRes)} catch(error) {return new Error(error)}
}这样一来上面Promise存在的两个每种不足的地方是不是就被优化了呢所以说async/await是JS中异步编写的最后解决方案我个人觉得一点问题没有,但是我不知道你看上面的代码,每一次异步操作都要用try/catch进行错误处理是不是感觉不够方便不够智能呢?3await-to-js-小而美的npm包基本用法作者是这样介绍这个库的Async await wrapper for easy error handling without try-catch。中文翻译过来就是无需 try-catch 即可轻松处理错误的异步等待包装器。这里做个简单的对比,之前我们在异步操作中处理错误的方法是这样的function async asyncTask() {try {const asyncFuncARes await asyncFuncA()} catch(error) {return new Error(error)}try {const asyncFuncBRes await asyncFuncB(asyncFuncARes)} catch(error) {return new Error(error)}try {const asyncFuncCRes await asyncFuncC(asyncFuncBRes)} catch(error) {return new Error(error)}
}而用了await-to-js之后,我们可以这样的处理错误import to from ./to.js;
function async asyncTask() {const [err, asyncFuncARes] await to(asyncFuncA())if(err) throw new (error);const [err, asyncFuncBRes] await tp(asyncFuncB(asyncFuncARes))if(err) throw new (error);const [err, asyncFuncCRes] await to(asyncFuncC(asyncFuncBRes)if(err) throw new (error);
}是不是简洁多了呢?作者究竟用了什么黑魔法?你可能不信源码只有仅仅15行。源码分析export function toT, U Error (promise: PromiseT,errorExt?: object
): Promise[U, undefined] | [null, T] {return promise.then[null, T]((data: T) [null, data]).catch[U, undefined]((err: U) {if (errorExt) {const parsedError Object.assign({}, err, errorExt);return [parsedError, undefined];}return [err, undefined];});
}export default to;上面这里是TS版的源码,但是考虑到有些同学可能还没接触过TS,我着重分析一下下面这版JS版的源码。export function to(promise, errorExt) {return promise.then((data) [null, data]).catch((err) {if (errorExt) {const parsedError Object.assign({}, err, errorExt);return [parsedError, undefined];}return [err, undefined];});
}
export default to;这里我们先抛开errorExt这个自定义的错误文本,核心代码是这样的export function to(promise) {return promise.then((data) [null, data]) // 成功,返回[null,响应结果].catch((err) {return [err, undefined]; // 失败,返回[错误信息,undefined]});
}
export default to;可以看出,其代码的逻辑用中文解释是这样的无论成功还是失败都返回一个数组,数组的第一项是和错误相关的,数组的第二项是和响结果相关的成功的话数组第一项也就是错误信息为空,数组第二项也就是响应结果正常返回失败的话数组第一项也就是错误信息为错误信息,数组第二项也就是响应结果返回undefined经过上面的分析我们可以认定,世界上没有什么黑魔法,没有你做不到,只有你想不到。这里我们再来看函数to的第二个参数errorExt不难发现,这玩意其实就是拿来用户自定义错误信息的,通过Object.assign将正常返回的error和用户自定义和合并到一个对象里面供用户自己选择。4结语源码不可怕,可怕的是自己的面对未知的恐惧感。敢于面对,敢于尝试,才能更上一层楼。继续加油,少年。关注我,vx:codebangbang,掘金:爱嘿嘿的小黑。5参考资料仓库地址https://github.com/scopsy/await-to-js官方文章How to write async await without try-catch blocks in Javascript[2]参考资料[1]https://segmentfault.com/a/1190000010244279: https://link.juejin.cn?targethttps%3A%2F%2Fsegmentfault.com%2Fa%2F1190000010244279[2]How to write async await without try-catch blocks in Javascript: https://blog.grossman.io/how-to-write-async-await-without-try-catch-blocks-in-javascript/················· 若川简介 ·················你好我是若川毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇在知乎、掘金收获超百万阅读。从2014年起每年都会写一篇年度总结已经写了7篇点击查看年度总结。同时最近组织了源码共读活动帮助3000前端人学会看源码。公众号愿景帮助5年内前端人走向前列。识别上方二维码加我微信、拉你进源码共读群今日话题略。分享、收藏、点赞、在看我的文章就是对我最大的支持
