通知短信+运营短信,5秒速达,支持群发助手一键发送🚀高效触达和通知客户 广告
# 简介:回调 JavaScipt 中的许多动作都是**异步**的。 比如,这个`loadScript(src)`函数: ~~~js function loadScript(src) { let script = document.createElement('script'); script.src = src; document.head.append(script); } ~~~ 这个函数的作用是加载一个新的脚本。当使用`<script src="…">`将其添加到文档中时,浏览器就会对它进行加载和执行。 我们可以像这样使用: ~~~js // 加载并执行脚本 loadScript('/my/script.js'); ~~~ 函数是**异步**调用的,因为动作不是此刻(加载脚本)完成的,而是之后。 调用初始化脚本加载,然后继续执行。当脚本正在被加载时,下面的代码可能已经完成了执行,如果加载需要时间,那么同一时间,其他脚本可能也会被运行。 ~~~js loadScript('/my/script.js'); // 下面的代码在加载脚本时,不会等待脚本被加载完成 // ... ~~~ 现在,我们假设想在新脚本被加载完成时,被立即使用。它可能声明了新函数,因此我们想要运行它们。 但如果我们在`loadScript(…)`调用后,立即那么做,就会导致操作失败。 ~~~js loadScript('/my/script.js'); // 脚本含有 "function newFunction() {…}" newFunction(); // 没有这个函数! ~~~ 很明显,浏览器没有时间去加载脚本。因此,对新函数的立即调用失败了。`loadScript`函数并没有提供追踪加载完成时方法。脚本加载然后最终的运行,仅此而已。但我们希望了解脚本何时加载完成,以使用其中的新函数和新变量。 我们将`callback`函数作为第二个参数添加至`loadScript`中,函数在脚本加载时被执行: ~~~js function loadScript(src, *!*callback*/!*) { let script = document.createElement('script'); script.src = src; script.onload = () => callback(script); document.head.append(script); } ~~~ 如果现在你想从脚本中调用新函数,我们应该在回调函数中那么写: ~~~js loadScript('/my/script.js', function() { // 在脚本被加载后,回调才会被运行 newFunction(); // 现在起作用了 ... }); ~~~ 这是我们的想法:第二个参数是一个函数(通常是匿名的)会在动作完成后被执行。 这是一个可运行的真实脚本示例: ~~~js function loadScript(src, callback) { let script = document.createElement('script'); script.src = src; script.onload = () => callback(script); document.head.append(script); } *!* loadScript('https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js', script => { alert(`Cool, the ${script.src} is loaded`); alert( _ ); // 在加载的脚本中声明的函数 }); */!* ~~~ 这被称为“基于回调”的异步编程风格。异步执行某些动作的函数,应该提供一个在函数完成时可以运行的`callback`参数。 我们`loadScript`中就是那么做的,但很明显这是一般性的方法。 ## [](https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/11-async/01-callbacks/article.md#%E5%9C%A8%E5%9B%9E%E8%B0%83%E4%B8%AD%E5%9B%9E%E8%B0%83)在回调中回调 如何顺序加载两个脚本:先是第一个,然后是第二个? 最明显的方法是将第二个`loadScript`调用放在回调中,就像这样: ~~~js 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`完成时,内部回调就会被回调。 如果我们还想要一个脚本呢? ~~~js loadScript('/my/script.js', function(script) { loadScript('/my/script2.js', function(script) { *!* loadScript('/my/script3.js', function(script) { // ...在所有脚本被加载后继续操作 }); */!* }) }); ~~~ 因此,每一个动作都在回调内部。这对于新动作来说,非常好,但是其他动作却并不友好,因此我们接下来会看到一些此方法的变体。 ## [](https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/11-async/01-callbacks/article.md#%E5%A4%84%E7%90%86%E9%94%99%E8%AF%AF)处理错误 上述示例中,我们并没有考虑错误因素。假如加载失败会如何?我们的回调应该可以立即对其做出响应。 这是可以跟踪错误的`loadScript`改进版: ~~~js 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)`。 用法: ~~~js loadScript('/my/script.js', function(error, script) { if (error) { // handle error } else { // 成功加载脚本 } }); ~~~ 再一次强调,我们使用的`loadScript`方法是非常常规的。它被称为 "error-first callback" 风格。 惯例是: 1. `callback`的第一个参数是为了错误发生而保留的。一旦发生错误,`callback(err)`就会被调用。 2. 第二个参数(如果有需要)用于成功的结果。此时`callback(null, result1, result2…)`将被调用。 因此单个`callback`函数可以同时具有报告错误以及传递返回结果的作用。 ## [](https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/11-async/01-callbacks/article.md#%E5%9B%9E%E8%B0%83%E9%87%91%E5%AD%97%E5%A1%94)回调金字塔 从第一步可以看出,这是异步编码的一种可行性方案。的确如此,对于一个或两个的简单嵌套,这样的调用看起来非常好。 但对于一个接一个的多个异步动作,代码就会变成这样: ~~~js 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 { *!* // ...加载所有脚本后继续 (*) */!* } }); } }) } }); ~~~ 上述代码中: 1. 我们加载`1.js`,如果没有发生错误。 2. 我们加载`2.js`,如果没有发生错误。 3. 我们加载`3.js`,如果没有发生错误 —— 做其他操作`(*)`。 如果嵌套变多,代码层次就会变深,维护难度也随之增加,尤其是如果我们有一个不是`...`的真实代码,就会包含更多的循环,条件语句等。 这有时称为“回调地狱”或者“回调金字塔”。 [![](https://github.com/javascript-tutorial/zh.javascript.info/raw/master/1-js/11-async/01-callbacks/callback-hell.png)](https://github.com/javascript-tutorial/zh.javascript.info/blob/master/1-js/11-async/01-callbacks/callback-hell.png) 嵌套调用的“金字塔”在每一个异步动作中都会向右增长。很快就会失去控制。 因此这种编码方式并不可取。 我们可以通过为每个动作编写一个独立函数来解决这一问题,就像这样: ~~~js 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 { // ...在所有脚本被加载后继续 (*) } }; ~~~ 看到了么?效果一样,但是没有深层的嵌套了,因为我们使每个动作都有一个独立的顶层函数。 这很有效,但代码看起来就像是一个被分裂的表格。你可能注意到了,它的可读性非常差。在阅读时,需要在块之间切换。这非常不方便,尤其是不熟悉代码的读者,他们甚至不知道该跳转到何处。 名为`step*`的函数都是单一使用的,他们被创建的唯一作用就是避免“回调金字塔”。没有人会在动作链之外重复使用它们。因此这里的命名空间非常杂乱。 或许还有更好的方法。 幸运地是,有其他方法可以避免回调金字塔。其中一个最好的方法是使用 "promises",我们将在下一章中详细描述。