回调金字塔是什么意思_回调地狱

如果你想阅读体验更好,可以戳链接回调地狱

前言

从前一文中你真的了解回调我们已知道回调函数是必须得依赖另一个函数执行调用,它是异步执行的,也就是需要时间等待,典型的例子就是Ajax应用,比如http请求,在不刷新浏览器的情况下,当你执行DOM事件时,比如页面上点击某链接,回车等事件操作,浏览器会悄悄向服务端发送若干http请求,携带后台可识别的参数,等待服务器响应返回数据,这个过程是异步回调的,当许多功能需要连续调用,环环相扣依赖时,它就类似下面的代码,代码全部一层一层的嵌套,看起来就很庞大,很恶心,就产生了回调地狱.本文,将为你揭晓怎么避免回调地狱,您将在本文中了解到以下内容:

什么是回调地狱(函数作为参数层层嵌套)

什么是回调函数(一个函数作为参数需要依赖另一个函数执行调用)

如何解决回调地狱

保持你的代码简短(给函数取有意义的名字,见名知意,而非匿名函数,写成一大坨)

模块化(函数封装,打包，每个功能独立,可以单独的定义一个js文件Vue,react中通过import导入就是一种体现)

处理每一个错误

创建模块时的一些经验法则

承诺/生成器/ES6等

Promises:编写异步代码的一种方式，它仍然以自顶向下的方式执行，并且由于鼓励使用try / catch样式错误处理而处理更多类型的错误

Generators:生成器让你“暂停”单个函数，而不会暂停整个程序的状态，但代码要稍微复杂一些，以使代码看起来像自上而下地执行

Async functions:异步函数是一个建议的ES7功能，它将以更高级别的语法进一步包装生成器和继承

什么是“回调地狱”？

异步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))

}

})

<