一、撒是回调函数
回调函数是一个通过指针调用的函数。如果你把这个指针作为参数传给另一个函数，当这个指针指向的函数被调用的时候，我们就说和这个函数是回调函数。回调函数不是由函数的实现方直接调用的，而是在特定的时间或者条件，由另一方函数调用。
二、回调函数能干撒
把调用者和被调用者区分开，调用者不关心谁是被调用者，它只需知道存在一个具有特定原型的和限制条件的被调用者函数。简而言之，回调函数允许用户把需要调用的函数作为一个指针传给另一个函数，使程序更加灵活。
三、回调函数的二哈-回调地狱
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)) } }) }) } })
回调地狱的原因是当编写人员以重上往下视觉方式编写JavaScript。很多人都会犯这个错误！在C，java,Ruby,Python等语言中，编写人员期望第一行发生的任何事情都会在第二行代码运行开始之前被完成，依次类推。就会产生上述结果。
回调地狱（二哈拆家）的本质：
- 嵌套函数存在严重的耦合，牵一发而动全身。
- 错误处理比较艰难，不能使用try catch 和不能直接return。
四、如何解决二哈拆家
三个原则：
- 保持代码浅（打二哈）
- 模块化（打二哈）
- 处理每一个错误（还是打二哈）
4.1拆解function，将各部拆解为一个一个的function
源代码 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 }) }
代码分解 document.querySelector('form').onsubmit = formSubmit function 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 }
4.2事件发布/监听模式
一方面监听事件发生，如果发生执行相应的回调，另一方面，监听操作的完成，当操作完成时进行相应的回调。
4.3Promise
readFile('./sample.txt').then(content => { let keyword = content.substring(0, 5); return queryDB(keyword); }).then(res => { return getData(res.length); }).then(data => { console.log(data); }).catch(err => { console.warn(err); });
4.4Generator
// 我们的主任务——显示关键字 // 使用yield暂时中断下方代码执行 // yield后面为promise对象 const showKeyword = function* (filepath) { console.log('开始读取'); let keyword1 = yield readFile(filepath); let keyword2 = yield readFile(filepath); } // generator的流程控制 let gen = showKeyword(); let res = gen.next(); let res1 = gen.next();
4.5async/await
可以看到，上面的方法虽然都在一定程度上解决了异步编程中回调带来的问题。然而：
- function拆分的方式其实仅仅只是拆分代码块，时常会不利于后续维护；
- 事件发布/监听方式模糊了异步方法之间的流程关系；
- Promise虽然使得多个嵌套的异步调用能够通过链式的API进行操作，但是过多的then也增加了代码的冗余，也对阅读代码中各阶段的异步任务产生了一定干扰；
- 通过generator虽然能提供较好的语法结构，但是毕竟generator与yield的语境用在这里多少还有些不太贴切。
因此，这里再介绍一个方法，它就是es7中的async/await。
简单介绍一下async/await。基本上，任何一个函数都可以成为async函数，以下都是合法的书写形式：
const printData = async function (filepath) { let keyword = await readFile(filepath); let count = await queryDB(keyword); let data = await getData(res.length); console.log(data); }); printData('./sample.txt');
五、二哈拆家不要怕，防狼喷一喷，轻松解决。
