嵌套回调函数常常用在两个逻辑上具备先后顺序的异步操作场景中。
思考上面的问题:咱们如何按程序加载两个脚本?
天然的解决方案是将第二个 loadScript 调用放在回调中,如下所示:
loadScript('/my/script.js', function(script) {alert(`Cool, the ${script.src} is loaded, let's load one more`);
loadScript('/my/script2.js', function(script) {alert(`Cool, the second script is loaded`);
});
});
外层 loadScript 实现后,回调启动内层的 loadScript 调用。
如果咱们想要程序加载更多的脚本,该怎么办?
loadScript('/my/script.js', function(script) {loadScript('/my/script2.js', function(script) {loadScript('/my/script3.js', function(script) {// ...continue after all scripts are loaded});
});
});
对于回调参数的出错解决
在下面的例子中,咱们没有思考谬误。如果脚本加载失败怎么办?咱们的回调应该可能对此做出反馈。
这是一个改良的 loadScript 版本,能够跟踪加载谬误:
function loadScript(src, callback) {let script = document.createElement('script');
script.src = src;
script.onload = () => callback(null, script);
script.onerror = () => callback(new Error(`Script load error for ${src}`));
document.head.append(script);
}
它调用 callback(null, script) 胜利加载,否则调用 callback(error)。
生产代码:
loadScript('/my/script.js', function(error, script) {if (error) {// handle error} else {// script loaded successfully}
});
咱们用于 loadScript 的办法实际上很常见。它被称为“谬误优先回调(error-first callback)”格调。
约定是:
如果产生谬误,回调的第一个参数是为谬误保留的。而后回调(谬误)被调用。
第二个参数(如果须要,还有下一个参数)用于胜利的后果。而后调用 callback(null, result1, result2…)。
因而,单个回调函数用于报告谬误和传回后果。
Pyramid of Doom
乍一看,嵌套回调函数看起来像是一种可行的异步编码方法。的确如此。对于一个或两个嵌套调用,其复杂度尚在编程人员可能掌控的范畴内。
然而对于一个接一个的多个异步操作,咱们会有这样的代码:
loadScript('1.js', function(error, script) {if (error) {handleError(error);
} else {
// ...
loadScript('2.js', function(error, script) {if (error) {handleError(error);
} else {
// ...
loadScript('3.js', function(error, script) {if (error) {handleError(error);
} else {// ...continue after all scripts are loaded (*)
}
});
}
});
}
});
随着调用变得更加嵌套,代码变得更深并且越来越难以治理,特地是如果咱们有真正的代码而不是 …… 可能包含更多的循环、条件语句等。
这有时被称为 回调天堂
或 末日金字塔
。
嵌套调用的“金字塔”随着每个异步操作而向右增长。很快它就失去了管制。
咱们能够把每个匿名回调函数,改写成为由名称的规范函数,来局部水平的躲避回调天堂问题:
loadScript('1.js', step1);
function step1(error, script) {if (error) {handleError(error);
} else {
// ...
loadScript('2.js', step2);
}
}
function step2(error, script) {if (error) {handleError(error);
} else {
// ...
loadScript('3.js', step3);
}
}
function step3(error, script) {if (error) {handleError(error);
} else {// ...continue after all scripts are loaded (*)
}
}
咱们应用 JavaScript 提供的 promise,能够从根本上躲避回调天堂问题。