JavaScript/jQuery多层循环中嵌套Promise的正确实现及执行顺序问题

多层循环场景下，通过Promise（结合jQuery的异步方法）实现串行/并行的异步操作完全可行，核心是要正确构建Promise链，确保所有异步任务的状态都被Promise追踪，这样就能在所有嵌套异步操作完成后执行后续逻辑。

原代码问题分析 #

你的代码出现END先打印的问题，核心原因有几点：

1. doxxx和doyyy函数没有返回Promise对象，导致外层Promise.all无法感知内部异步操作的状态，直接进入了then逻辑
2. Promise.all(promises).then(dozzz());是错误写法：then需要接收函数引用，这里直接执行了dozzz()，导致它同步触发
3. doyyy的success回调里返回Promise没有意义，因为没有把这个Promise和外层的ajax操作关联起来

修正后的实现方案 #

利用jQuery的$.ajax返回的jqXHR对象（本身实现了Promise接口），可以直接将其纳入Promise链，无需额外手动创建Promise：

"use strict";

window.onload = function(e) { 
    console.log("HELLO WORLD");

    Promise.all([doxxx()])
        .then(dozzz); // 传递函数引用，而非立即执行
}

function doxxx() {
    console.log('doxxx CALLED');
    // 返回ajax的Promise对象
    return $.ajax({
        url: '/vocab', 
        type: 'POST',
        dataType: 'json'
    }).then(function(result) {
        console.log(result.data);
        var promises = [];
        $.each(result.data, function(index, value) {
            promises.push(doyyy(value[3]));
        });
        // 返回子Promise的all结果，让外层Promise等待所有子任务完成
        return Promise.all(promises);
    });
}

function doyyy(german) {
    console.log('doyyy CALLED');
    // 直接返回ajax的Promise对象
    return $.ajax({
        url: '/vocab2', 
        type: 'POST',
        data: {german : german},
        dataType: 'json'
    }).then(function(result) {
        console.log(result.data);
        // 这里可以返回数据供后续使用，不需要额外创建Promise
        return result.data;
    });
}

function dozzz() {
    console.log("END");
}

流程说明 #

1. window.onload中调用doxxx()，它返回一个Promise，代表第一个ajax请求和所有子ajax请求的完成状态
2. doxxx内部完成/vocab请求后，循环调用doyyy收集所有子ajax的Promise，通过Promise.all等待所有子请求完成
3. 外层Promise.all等待doxxx的Promise完成后，才会调用dozzz，确保END在所有异步操作完成后打印

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