谈谈JavaScript异步代码优化

在实际编码中，我们经常会遇到Javascript代码异步执行的场景，比如ajax的调用、定时器的使用等，在这样的场景下也经常会出现这样那样匪夷所思的bug或者糟糕的代码片段，那么处理好你的Javascript异步代码成为了异步编程至关重要的前提。

首先，我们来看下异步编程中最常见的一种问题，便是回调地狱。它的出现是由于异步代码执行时间的不确定性及代码间的依赖关系引发的，比如：

由于我们不知道第一个动画什么时候开始或者什么时候结束，所以我们把第二个动画的执行内容放到了第一个动画的结束事件里，把第三个动画放到了第二个动画的结束事件里，这时候如果有很多这样的动画，那么就会形成回调地狱。除了回调地狱，如果我们需要在异步代码中捕获异常也比较麻烦，可能需要手动配置捕获方法:

这样的代码书写明显不是我们想要的，不仅不利于维护，而且也在一定程度上违背了良好的Javascript编码规范。那么我们如何优雅的写好我们的异步代码呢？我主要列了以下5种常见方案：1.callback顾名思义便是回调，但并不是将回调内容放在异步方法里，而是放到外部的回调函数中，比如问题1的代码我们通过callback可以变成这样：

如此我们看似异步的代码变成了同步的写法，避免了层层嵌套的写法，看上去也流畅了很多。同时使用callback也是异步编程最基础和核心的一种解决思路。2.基于callback，Promise目前也被广泛运用，其是异步编程的一种解决方案，比传统的回调函数解决方案更合理和强大。相信了解ES6的同学肯定不会陌生。

通过Promise我们把图片构建加载的逻辑和成功或失败后的处理逻辑拆分了开来，将回调函数的嵌套，改成链式调用，同时使用Promise的catch事件回调后异常捕获也变得十分方便。3.与Promise一样，Generator函数也是ES6提供的一种异步编程解决方案，其会返回一个遍历器对象，异步任务需要暂停的地方我们可以使用yield语句，比如：

Generator中遇到yield的地方会进行暂停，所以我们需要手动调用next方法往下，next返回值的value属性便是我们需要的数据，这里是fetch方法返回的Promise对象，所以我们需要使用then回调，最后再调用g.next(data)结束并输出数据。

co模块虽然很好的帮助了我们解决了Generator函数必须靠执行器的问题，但是使用起来我们都需要额外引入一个模块，那么有没有更加方便的方式来解决呢？5.除了以上4种方式可以解决Javascript异步编程的问题外，ES7还提供了更加方便的async函数和await命令，了解一下？其实async是Generator函数的语法，不同点在于其内置了执行器，也就是说async函数自带执行器