微信公众号：前端呼啦圈（Love-FED）
我的博客：劳卜的博客
知乎专栏：前端呼啦圈
前言在实际编码中，我们经常会遇到Javascript代码异步执行的场景，比如ajax的调用、定时器的使用等，在这样的场景下也经常会出现这样那样匪夷所思的bug或者糟糕的代码片段，那么处理好你的Javascript异步代码成为了异步编程至关重要的前提。下面我们从问题出发，一步步完善你的异步代码。
异步问题 1. 回调地狱首先，我们来看下异步编程中最常见的一种问题，便是回调地狱。它的出现是由于异步代码执行时间的不确定性及代码间的依赖关系引发的，比如：
// 一个动画结束后，执行下一个动画，下一个动画结束后再执行下一个动画 $('#box').animate({width: '100px'}, 1000, function(){ $('#box').animate({height: '100px'}, 1000, function(){ $('#box').animate({left: 100}, 1000); }); });由于我们不知道第一个动画什么时候开始或者什么时候结束，所以我们把第二个动画的执行内容放到了第一个动画的结束事件里，把第三个动画放到了第二个动画的结束事件里，这时候如果有很多这样的动画，那么就会形成回调地狱。
2. 捕获异常除了回调地狱，如果我们需要在异步代码中捕获异常也比较麻烦，可能需要手动配置捕获方法:
try { throw new Error('fail'); } catch (e) { console.log(e); }这样的代码书写明显不是我们想要的，不仅不利于维护，而且也在一定程度上违背了良好的Javascript编码规范。
解决方案那么我们如何优雅的写好我们的异步代码呢？我主要列了以下5种常见方案：
1. callbackcallback顾名思义便是回调，但并不是将回调内容放在异步方法里，而是放到外部的回调函数中，比如问题1的代码我们通过callback可以变成这样：
$('#box').animate({width: '100px'}, 1000, autoHeight); function autoHeight() { $('#box').animate({height: '100px'}, 1000, autoLeft); } function autoLeft() { $('#box').animate({left: 100}, 1000); }如此我们看似异步的代码变成了同步的写法，避免了层层嵌套的写法，看上去也流畅了很多。同时使用callback也是异步编程最基础和核心的一种解决思路。
2. Promise基于callback，Promise目前也被广泛运用，其是异步编程的一种解决方案，比传统的回调函数解决方案更合理和强大。相信了解ES6的同学肯定不会陌生。
比如我们现在有这样一个场景，我们需要异步加载一张图片，在图片加载成功后做一些操作，这里我不想用回调函数或者将逻辑写在图片的成功事件里，那么用Promise我们可以这样写：
let p = new Promise((resolve, reject) => { let img = new Image(); // 创建图片对象 // 图片加载成功事件 img.onload = function() { resolve(img); // 输出图片对象 }; // 图片加载失败事件 img.onerror = function() { reject(new Error('load error')); // 输出错误 }; img.src = 'xxx'; // 图片路径 }); // Promise then回调 p .then(result => { $('#box').append(result); // 成功后我们把图片放到页面上 }) .catch(error => { console.log(error); // 打印错误 })通过Promise我们把图片构建加载的逻辑和成功或失败后的处理逻辑拆分了开来，将回调函数的嵌套，改成链式调用，同时使用Promise的catch事件回调后异常捕获也变得十分方便。
当然如果要等待多个异步请求完成执行某些操作，可以使用Promise.all方法，如：
let p = Promise.all([p1, p2, p3]); // 其中p1、p2、p3都是Promise实例 p.then(result => console.log(result));当然Promise也有其相应的缺点，比如下一个then回调只能获取上一个then返回的数据，不能跨层获取，同时大量的then回调也会使代码不容易维护。
3. Generator与Promise一样，Generator 函数也是 ES6 提供的一种异步编程解决方案，其会返回一个遍历器对象，异步任务需要暂停的地方我们可以使用yield语句，比如：
function* getData() { let result = yield fetch("xxx"); // 调用ajax，yield命令后面只能是 Thunk 函数或 Promise 对象 console.log(result); } // 执行 let g = getData(); let result = g.next(); // { value: [object Promise], done: false } result.value.then(data => { return data.json(); }).then(data => { g.next(data); });