如何在JavaScript/JQuery中实现数组瀑布式回调（无需async.waterfall，失败即终止）

不用async.waterfall也能轻松实现这种逐个执行、失败即终止的瀑布流逻辑，核心思路是用递归替代循环遍历——因为普通的forEach是同步执行的，没办法等待异步AJAX完成后再处理下一项，而递归可以让我们在前一个异步任务的回调里触发下一个任务，完美控制顺序和终止逻辑。

我结合你给出的代码片段，提供两个版本的实现：

一、原生JavaScript版本（模拟AJAX场景） #

先改造你的模拟函数，加上异步延迟（更贴近真实AJAX的行为），再用递归实现瀑布流：

var waterfallData = [{ "name":"nodejs" },{ "name":"javascript" },{ "name":"angularjs" },{ "name":"mongodb" }];

// 模拟AJAX异步调用的函数，这里用setTimeout模拟网络延迟
function wf(data, cb) {
    setTimeout(function() {
        if(data.name === "angularjs"){
            // 触发错误，第一个参数传错误对象，第二个传null
            cb(new Error("任务失败：angularjs触发终止条件"), null);
        }else{
            // 执行成功，第一个参数传null，第二个传结果
            cb(null, data);
        }
    }, 500); // 模拟500ms的网络延迟
}

var finalData = { "dataCheck": [] };

// 核心递归处理函数
function processWaterfall(index) {
    // 终止条件：所有元素处理完成
    if (index >= waterfallData.length) {
        console.log("✅ 所有瀑布流任务执行完成", finalData);
        return;
    }

    var currentItem = waterfallData[index];
    wf(currentItem, function(err, result) {
        if (err) {
            // 遇到错误，终止后续所有任务
            console.error("❌ 任务失败，终止流程：", err.message);
            finalData.error = err.message;
            return;
        }

        // 任务成功，保存结果
        finalData.dataCheck.push(result);
        console.log("✅ 当前任务执行成功：", result);
        // 递归调用，处理下一个元素
        processWaterfall(index + 1);
    });
}

// 启动瀑布流
processWaterfall(0);

代码说明： #

• 递归函数processWaterfall负责逐个处理数组元素，每次只在前一个异步任务完成后才触发下一个。
• 当某个任务返回错误时，直接return不触发下一次递归，自然终止整个流程。
• 成功的结果会被收集到finalData.dataCheck中，方便后续使用。

二、jQuery版本（真实AJAX场景） #

如果你的项目用jQuery的$.ajax做请求，可以直接利用它的done/fail回调来实现：

var waterfallData = [{ "name":"nodejs" },{ "name":"javascript" },{ "name":"angularjs" },{ "name":"mongodb" }];

// 真实的jQuery AJAX请求函数
function wf(data) {
    return $.ajax({
        url: `/api/check/${data.name}`, // 替换成你的真实接口地址
        method: 'GET',
        dataType: 'json'
    });
}

var finalData = { "dataCheck": [] };

function processWaterfall(index) {
    if (index >= waterfallData.length) {
        console.log("✅ 所有AJAX任务执行完成", finalData);
        return;
    }

    wf(waterfallData[index])
        .done(function(result) {
            // 请求成功，保存结果并处理下一项
            finalData.dataCheck.push(result);
            console.log("✅ AJAX调用成功：", result);
            processWaterfall(index + 1);
        })
        .fail(function(jqXHR, textStatus, errorThrown) {
            // 请求失败，终止后续所有任务
            console.error("❌ AJAX调用失败，终止流程：", errorThrown);
            finalData.error = errorThrown;
        });
}

// 启动AJAX瀑布流
processWaterfall(0);

核心要点总结： #

• 绝对不要用forEach：它会一次性触发所有异步任务，无法控制顺序和终止。
• 递归是关键：通过递归实现“串行执行异步任务”的效果，前一个完成再启动下一个。
• 错误终止逻辑：在错误回调中不触发下一次递归，就能直接终止剩余任务。

内容的提问来源于stack exchange，提问作者Naveen Asapu