admin 管理员组文章数量: 1184232
浅谈回调地狱
什么是回调地狱，我们先来看看官方的说法
官方理解上说的是函数作为参数层层嵌套看起来很好理解，实际上就是我们在做原生JS的时候产生的回调函数，因为函数闭包特性，所以产生层级嵌套，
当我们在执行DOM事件操作时,浏览器会悄悄向服务端发送很多的没有必要的http请求,携带后台可识别的参数,等待服务器响应返回数据,这个过程是异步回调的,当许多功能需要连续调用,环环相扣依赖时,它就像多层蛋糕一样。代码全部一层一层的嵌套,看起来就很庞大,很难以理解,这种情况下就产生了回调地狱.
那么问题来了回调地狱该怎么解决呢
出现回调地狱的最主要原因就是自己在编写代码的过程中过于刻板，循规蹈矩，以至于不断在一层函数下接着进行第二层，已达到第二层代码的执行效果。但很明显效果事半功倍。
首先我们可以在编写自己的代码的过程中可以优化自己的代码，比如说简单的命名函数这一块，我们不能杂乱无章的写一堆出来，可以对函数命名，简单明了。当发生异常时,你将获得引用实际函数名称而不是
“匿名”的堆栈跟踪。要时刻保持自己的代码简短美观。
模块化。如果一堆人都去做一件事情，每个人都有自己的思想，如果现在合理分配，每个人都有自己负责的，最后整合到一起是不是会有条理很多呢？同理，这里我们就用到了模块化开发。创建一个JS文件，
将一些重复出现的代码切割，模块化开发，当有需要的时候直接调用。会简单很多。还有像vue框架中常出现的import文件导出也属于模块化开发。
还有Promise方法，采用的执行方式也是由上而下的方式。多用在异步编程解决方案上。但是它也是书写代码不美观，有一种缩小版的回调既视感。
所以比较接近完美的方法比如像Async functions
Async functions是异步函数是一个建议的ES7功能，它将以更高级别的语法进一步包装生成器和继承
async 表示这是一个 async 函数，await 只能用在这个函数里面
await 表示在这里等待 Promise 返回结果后，再继续执行
await 后面跟着的应该是一个 Promise 对象（当然，其他返回值也没关系，只是会立即执行）
await 等待的虽然是 Promise 对象，但不必写 .then() ，可以直接得到返回值
function buildCatList(list, returnVal) {return new Promise(function (resolve, reject) {setTimeout(function (name) {var catList = list === '' ? name : list + ',' + nameresolve(catList)}, 200, returnVal)})}function fn(list) {return list + ',' + 555}async function render() {var a = await buildCatList('','Panther')var b = await buildCatList(a, 'Jaguar')var c = await buildCatList(b, 'Lion')var d = await fn(c)console.log(d)}render()本文标签： 浅谈回调地狱
版权声明：本文标题：浅谈回调地狱 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.roclinux.cn/b/1686652350a20624.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论