这是一个编写异步JavaScript程序的指导手册。

一、什么是回调地狱？

异步的JavaScript程序，或者说使用了回调函数的JavaScript程序，很难地去直观顺畅地阅读，大量的代码以这种方式结束：

fs.readdir(source, function (err, files) {  if (err) {    console.log('Error finding files: ' + err)  } else {    files.forEach(function (filename, fileIndex) {      console.log(filename)      gm(source + filename).size(function (err, values) {        if (err) {           console.log('Error identifying file size: ' + err)        } else {          console.log(filename + ' : ' + values)          aspect = (values.width / values.height)          widths.forEach(function (width, widthIndex) {            height = Math.round(width / aspect)            console.log('resizing ' + filename + 'to ' + height + 'x' + height)            this.resize(width, height).write(dest + 'w' + width + '_' + filename, function(err) {              if (err) console.log('Error writing file: ' + err)            })          }.bind(this))        }      })    })  }})

有没有看到这些以"})"结尾的金字塔结构？这个形状为“亲切地”称为回调地狱。

二、什么是callback（回调）？

“callback"仅仅只是一种使用JavaScript函数的一种通用称呼。在JavaScript语言中，并没有一种特定的东西称之为“callback”，这个只是一种方便的称呼。不同于大部分立即返回结果的函数，这些使用callback的函数需要消耗一些时间才能返回结果。“asynchronous”（异步），或者简称为“async”仅仅表示需要花费一些时间，或者是“在未来发生，而不是现在”。通常情况下，callback仅仅用于操作I/O的时候使用到。比如下载、读写文件、与数据库交互等。

当调用一个普通的函数的时候，你可以这样使用返回值：

var result = multiplyTwoNumbers(5, 10)console.log(result)// 50 gets printed out

然而，异步函数，也就是使用了callback函数的不会立刻返回任何东西。

var photo = downloadPhoto('http://coolcats.com/cat.gif')// photo is 'undefined'!

在这种情况下，下载gif文件会花费相当长的时间，而且你并不希望你的程序在等待下载结束的过程中处于“暂停”（也就是阻塞，block）状态。

相反，你可以把下载结束后需要执行的操作存放到一个函数中，这个就是callback（回调）！你提供了一个“downloadPhoto”的函数，并且这个函数会在下载完成的时候执行callback（call you back later）函数，并且传递photo参数（或者出错的时候返回一个错误信息）。

downloadPhoto('http://coolcats.com/cat.gif', handlePhoto)function handlePhoto (error, photo) {  if (error) console.error('Download error!', error)  else console.log('Download finished', photo)}console.log('Download started')

人们在尝试理解“callback”这个概念的最大困难之处在于，程序运行的过程中，程序中的代码，是怎么样按照规则执行的。在这个例子中，有三件主要的代码段会发生：首先 “handlePhoto”函数被申明，然后是“downloadPhoto”函数会被调用并且把“handlePhoto”函数作为回调函数“callback”参数传递进入，最后，打印一句话“Download started”。

要注意以下，“handlePhoto”并没有立即被调用，只是创建并且作为一个参数传递给了“downloadPhoto”。但是，一旦“downloadPhoto”函数执行完成之后，”handlePhoto“就会运行。这个取决于网络连接到底有多快。

这个例子试图说明两个重要的概念：

（1）回调函数“handlePhoto”仅仅是一种“存放”操作的方式，而这些操作需要延迟一段时间之后进行。

（2）代码的执行规则并不是按照阅读代码的“从上到下”的方式去遵守的，代码执行会根据事情结束的时间跳转嵌套。

三、我们如何解决“回调地狱”？

回调地狱的产生往往来源于对编码练习的缺乏，幸运的是，写出更好的代码并不困难！

我们只需要遵循如下三个原则：

（1）保持代码浅显易读

下面是一个杂乱的JavaScript代码，这个代码用于通过使用“ ”从浏览器想服务端提交一个Ajax请求：

var form = document.querySelector('form')form.onsubmit = function (submitEvent) {  var name = document.querySelector('input').value  request({    uri: "http://example.com/upload",    body: name,    method: "POST"  }, function (err, response, body) {    var statusMessage = document.querySelector('.status')    if (err) return statusMessage.value = err    statusMessage.value = body  })}

这段代码有两个匿名函数，我们给他们赋上名字吧！

var form = document.querySelector('form')form.onsubmit = function formSubmit (submitEvent) {  var name = document.querySelector('input').value  request({    uri: "http://example.com/upload",    body: name,    method: "POST"  }, function postResponse (err, response, body) {    var statusMessage = document.querySelector('.status')    if (err) return statusMessage.value = err    statusMessage.value = body  })}

正如你看到的，给函数进行命名是一件超级简单的事情，而且会立刻体验到几个好处：

1）感谢这些具有描述性意义的函数名称把，这些名称使代码更加容易地阅读；

2）当异常发生的时候，你会在异常堆栈中看到确切的函数名称，而不是“anonymous”之类的名字；

3）你可以把函数移动出去，并且通过名字去引用他们；

现在，我们把这两个函数移动到我们程序的最顶层：

document.querySelector('form').onsubmit = formSubmitfunction formSubmit (submitEvent) {  var name = document.querySelector('input').value  request({    uri: "http://example.com/upload",    body: name,    method: "POST"  }, postResponse)}function postResponse (err, response, body) {  var statusMessage = document.querySelector('.status')  if (err) return statusMessage.value = err  statusMessage.value = body}

注意一下，函数声明在这里被移动到了文件最底部，这个要感谢 .

（2）模块化

这个是最重要的部分：任何人都有能力创建模块。引用（来源于node.js项目）的话说：

Write small modules that each do one thing, and assemble them into other modules that do a bigger thing. You can't get into callback hell if you don't go there.

“编写一个个小的模块，每个模块完成一件事情，然后把他们组装起来，去完成一个更大的事情，回调地狱这个坑，你不去往那走，你是不会陷进去的”。

让我们从上面的代码中提取模板代码，然后通过拆分到一组文件中的方式，将这些模板代码组装成module。我会展示一个module的格式，这种格式既可以用于浏览器的代码，也可以用在服务端。

这个是一个新的文件，叫做“formuploader.js”，里面包含两个从前面代码中提取的两个函数：

module.exports.submit = formSubmitfunction formSubmit (submitEvent) {  var name = document.querySelector('input').value  request({    uri: "http://example.com/upload",    body: name,    method: "POST"  }, postResponse)}function postResponse (err, response, body) {  var statusMessage = document.querySelector('.status')  if (err) return statusMessage.value = err  statusMessage.value = body}

其中“module.exports”部分是一个node.js模块系统的一个例子，electron 和浏览器使用。我非常喜欢这种模块化，因为它可以工作在任何地方，而且非常简单，并且不需要复杂的配置文件或者脚本。

现在我们有了“formuploader.js”（并且已经作为一个脚本，在页面加载完成之后载入到了页面中），我们只需要“require”这个模块并且使用它！这个是一个我们的程序中具体代码的样子：

var formUploader = require('formuploader')document.querySelector('form').onsubmit = formUploader.submit

这样，我们的程序仅仅需要两行代码，并且有如下的好处：

1）对于一个新的开发者来说，更加容易理解了 ------ 他们不用深陷于“被迫通读全部“formuploader”函数”。

2）“formuploader”可以用于其他地方，不用重复编写代码，并且可以轻松地分享到github或者npm上去。

（3）处理每一个独立的异常

错误（error）有很多种类型：程序员犯的语法错误（往往在第一次尝试运行程序的时候会被发现）；程序员犯的运行时错误（程序可以运行但是里面有一个bug会把事情弄糟）；其他情况下的平台错误比如无效的文件权限，硬件驱动失效、网络连接异常等问题。这个部分主要针对最后一类错误（error）。

前面两条原则可以让你的代码具有可读性，但是这一条可以让你的代码保持稳定健壮。当你在使用回调函数（callback）的时候，讲道理你其实是在和任务打交道，这些任务都是被分发给回调函数，并且回调函数会在后台执行，然后这个任务要么执行成功，要么由于失败而终止。任何有经验的开发者都会告诉你：你永远不会知道错误是谁么时候会发生，你只有去假定他们会一直出现。

目前在回调函数中处理错误最流行的方式是Node.js风格：所有的回调函数的第一个参数永远是给“error”保留着。

var fs = require('fs') fs.readFile('/Does/not/exist', handleFile) function handleFile (error, file) {if (error) return console.error('Uhoh, there was an error', error)// otherwise, continue on and use `file` in your code}

在第一个参数中使用“error”是一个简单方便的鼓励记得处理错误的一个方式。如果把这个参数放到第二的位置，你在写代码的时候往往会容易忽略第二个“error”参数，而只关注第一个参数，比如“function handleFile(file){}”。

Code linters（检查代码的小工具）也可以通过配置，实现提醒你要处理这些回调函数错误。最简单的一个小工具就是。这个工具你仅仅只需要在你的代码文件的路径中执行 “$ standard”命令，它就会把你每一个没有进行错误处理的回调函数标记出来。