浅谈回调地狱

什么是回调地狱，我们先来看看官方的说法

官方理解上说的是函数作为参数层层嵌套看起来很好理解，实际上就是我们在做原生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 + ',' + name

      resolve(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()