如何将同步循环的多轮Ajax请求改为异步实现？（基于jQuery）

问题背景 #

通过Ajax从API1获取包含大量标识码的数组，需将这些标识码作为查询参数从API2请求关联数据。当前用jQuery循环实现的版本功能可用但效率极低——初始API1请求优先执行，但后续API2请求均为同步串行执行，希望通过异步方式（如Deferred对象）优化执行效率。

原实现代码 #

<script type="text/javascript">
$.ajax({
    type: "GET",
    url: "https://url.com/api1",
    contentType: "application/json",
    dataType: "json",
    success: function(result){
        $.each( result, function(key, val) {
            $.each( val.SubGroups, function(key, val) {
                $.each( val.SubGroups, function(key, val) {
                    console.log(val.Group_Description);
                    $.each( val.Requirements, function(key, val) {
                        let reqid = val.Requirement_ID;
                        $.ajax({
                            type: "GET",
                            url: "https://url.com/api2?Req_ID=" + reqid,
                            contentType: "application/json",
                            dataType: "json",
                            success: function(operations){
                                console.log(operations.Name);
                                console.log(operations.Symbol);
                                console.log(operations.Hours);
                            }
                        })
                    });
                });
            });
        });
    }
})
</script>

API1 返回JSON格式 #

[
    {
        "SubGroups": [
            {
                "SubGroups": [
                    {
                        "Group_Description": "Description1",
                        "Requirements": [
                            { "Requirement_ID": "123" },
                            { "Requirement_ID": "456" },
                            { "Requirement_ID": "789" }
                        ]
                    },
                    {
                        "Group_Description": "Description2",
                        "Requirements": [
                            { "Requirement_ID": "123" },
                            { "Requirement_ID": "456" },
                            { "Requirement_ID": "789" }
                        ]
                    }
                ]
            }
        ]
    }
]

API2 返回JSON格式 #

[
    {
        "Name": 1,
        "Symbol": "\u0000",
        "Hours": 2
    }
]

优化方案 #

核心优化思路 #

1. 提取所有唯一的Requirement_ID，避免重复请求同一标识码
2. 利用jQuery的Deferred/Promise实现API2请求的并行异步执行
3. 补充错误处理逻辑，提升代码健壮性

完整优化代码 #

<script type="text/javascript">
// 第一步：优先请求API1获取数据
$.ajax({
    type: "GET",
    url: "https://url.com/api1",
    contentType: "application/json",
    dataType: "json"
})
.done(function(result) {
    // 收集所有唯一的Requirement_ID
    const reqIdSet = new Set();
    // 扁平化遍历嵌套结构提取ID
    result.forEach(topGroup => {
        topGroup.SubGroups.forEach(subLevel1 => {
            subLevel1.SubGroups.forEach(subLevel2 => {
                console.log(subLevel2.Group_Description);
                subLevel2.Requirements.forEach(req => {
                    reqIdSet.add(req.Requirement_ID);
                });
            });
        });
    });

    // 转换为数组并生成API2请求Promise数组
    const reqIds = [...reqIdSet];
    const api2Requests = reqIds.map(id => {
        return $.ajax({
            type: "GET",
            url: `https://url.com/api2?Req_ID=${id}`,
            contentType: "application/json",
            dataType: "json"
        });
    });

    // 等待所有API2请求完成
    $.when(...api2Requests)
    .done(function(...responses) {
        responses.forEach((res, index) => {
            const targetId = reqIds[index];
            console.log(`需求ID ${targetId} 关联数据：`);
            console.log(res[0].Name);
            console.log(res[0].Symbol);
            console.log(res[0].Hours);
        });
    })
    .fail(function(error) {
        console.error("API2请求失败：", error);
    });
})
.fail(function(error) {
    console.error("API1请求失败：", error);
});
</script>

优化点说明 #

• 去重处理：用Set自动过滤重复的标识码，减少不必要的API调用
• 并行请求：所有API2请求同时发起，相比串行执行效率提升显著
• 结构简化：将多层嵌套$.each改为数组forEach，代码可读性更强
• 错误捕获：为API1和API2的请求分别添加失败回调，便于问题排查

进阶优化（可选） #

如果API2支持批量查询参数（如https://url.com/api2?Req_ID=123,456,789），可以将所有标识码拼接为单个请求，进一步减少请求次数，效率会更高。需先确认API2的批量参数支持规则。

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