异步 JavaScript 简介 - 学习 Web 开发

日博365备用网站 admin 2025-07-29 00:26:30

事件处理程序是一种特殊类型的回调函数。而回调函数则是一个被传递到另一个函数中的会在适当的时候被调用的函数。正如我们刚刚所看到的:回调函数曾经是 JavaScript 中实现异步函数的主要方式。

然而,当回调函数本身需要调用其他同样接受回调函数的函数时,基于回调的代码会变得难以理解。当你需要执行一些分解成一系列异步函数的操作时,这将变得十分常见。例如下面这种情况:

jsfunction doStep1(init) {

return init + 1;

}

function doStep2(init) {

return init + 2;

}

function doStep3(init) {

return init + 3;

}

function doOperation() {

let result = 0;

result = doStep1(result);

result = doStep2(result);

result = doStep3(result);

console.log(`结果:${result}`);

}

doOperation();

现在我们有一个被分成三步的操作,每一步都依赖于上一步。在这个例子中,第一步给输入的数据加 1,第二步加 2,第三步加 3。从输入 0 开始,最终结果是 6(0+1+2+3)。作为同步代码,这很容易理解。但是如果我们用回调来实现这些步骤呢?

jsfunction doStep1(init, callback) {

const result = init + 1;

callback(result);

}

function doStep2(init, callback) {

const result = init + 2;

callback(result);

}

function doStep3(init, callback) {

const result = init + 3;

callback(result);

}

function doOperation() {

doStep1(0, (result1) => {

doStep2(result1, (result2) => {

doStep3(result2, (result3) => {

console.log(`结果:${result3}`);

});

});

});

}

doOperation();

因为必须在回调函数中调用回调函数,我们就得到了这个深度嵌套的 doOperation() 函数,这就更难阅读和调试了。在一些地方这被称为“回调地狱”或“厄运金字塔”(因为缩进看起来像一个金字塔的侧面)。

面对这样的嵌套回调,处理错误也会变得非常困难:你必须在“金字塔”的每一级处理错误,而不是在最高一级一次完成错误处理。

由于以上这些原因,大多数现代异步 API 都不使用回调。事实上,JavaScript 中异步编程的基础是 Promise,这也是我们下一篇文章要讲述的主题。

上一页 概述:异步 JavaScript 下一页