forEach 循环中的 AJAX 函数

Posted 2023-03-16

【中文标题】forEach 循环中的 AJAX 函数

【英文标题】：AJAX function inside forEach Loop

【发布时间】：2021-10-05 02:33:58

【问题描述】：

我有一个函数在视图列表中执行 foreach 循环，并且需要为循环中的每个视图发送 AJAX 请求。当它在成功函数中获得结果时，它会检查是否返回了特定的 Id，如果是，则将此视图添加到 selectBox。问题是，当我尝试在 selectBox 上定义 .change 事件时，它给了我一个错误，因为没有添加任何选项。我曾考虑过添加 ajaxStop，但我有其他不同的 AJAX 请求。 有谁知道我怎么能等到那些 Ajax 请求完成，但没有其他请求？

 var newdiv = $('<div id="viewListDiv" style ="margin:auto" ></div> ')
    var selectBox = $('<select id = "ViewsList" class="form-control" style="width:250px;margin-left: 70px; margin-rigth:70px;" ></select>');
views.forEach(function (view)
    
        _this.continue = true;
        var guid = view.search( "type": "resource" )[0].data.guid;
        jQuery.ajax(
            url: "api/forge/modelderivative/metadata/model",
            data: 
                "urn": urn,
                "viewableId": guid,
            ,
                success: function (metadata) 
                    _this.getIds(metadata.data);
                    if (_this.listdbId.includes(dbId[0])) 
                        var newOpt = new Option(view.data.viewableID, view.data.name);
                        selectBox.append(newOpt);
                    
                    _this.listdbId = []
                
        );
    );
        selectBox = selectBox[0];
        selectBox.change(function (opt) 
            //launch change function
    );

【问题讨论】：

使用返回 Promise 的 API（如 fetch 或 axios 库）会更轻松。

这能回答你的问题吗？ Jquery select change not firing

@thedude jQuery.ajax 确实返回了一个承诺

@Liam 他们的文档说它返回一个 jqXHR 对象，它是 XMLHTTPRequest 对象的超集

JQuery 3 implemented the A+ promise standard I believe。看起来没有人让 jQuery 文档保持最新状态，考虑到它的年龄，这并不奇怪。

【参考方案1】：

它看起来更像是一个纯 javascript 问题，而不是 Autodesk Forge Viewer。无论如何，无论您选择使用fetch 还是jquery.ajax，AJAX 调用都是异步工作。我们需要利用 Promise 来确保调用完成。这是您的代码片段的修订版：

const getModel = (view) => 
    return new Promise((resolve, reject) => 
        let guid = view.search( "type": "resource" )[0].data.guid;
        jQuery.ajax(
            url: "api/forge/modelderivative/metadata/model",
            data: 
                "urn": urn,
                "viewableId": guid,
            ,
            success: function (metadata) 
                resolve(metadata);
            
        ).fail((jqXHR, textStatus) => reject(jqXHR, textStatus));
    );
;

const tasks = views.map((view) => getModel(view));
const results = await Promise.all(tasks);

for(let i=0; i<results.length; i++) 
    let metadata = results[i];

    //..