forEach 循环中的 AJAX 函数答案

【问题标题】：AJAX function inside forEach LoopforEach 循环中的 AJAX 函数
【发布时间】：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 文档保持最新状态，考虑到它的年龄，这并不奇怪。

标签： javascript jquery autodesk-forge autodesk-viewer

【解决方案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];

    //..
}

【讨论】：