如何使用 .done() 和 .then() 将嵌套的 jQuery Promises 转换为平面代码结构答案

【问题标题】：How to turn nested jQuery Promises into flat code structure using .done() and .then()如何使用 .done() 和 .then() 将嵌套的 jQuery Promises 转换为平面代码结构
【发布时间】：2018-11-17 04:54:22
【问题描述】：

下面的代码使用 jQuery Promise 和回调函数来实现以下功能：

使用storeGroupOnServer() 将组 UUID 保存到服务器
使用createGroupDomNode()为组创建一个DOM元素
为每个图像创建子元素，使用createNewChildDomNode()

如何使用.then() 写得更扁平（避免嵌套）？

groupPromise.done(function(fileGroupInfo) {
    storeGroupOnServer(fileGroupInfo.uuid, function(groupid){

        createGroupDomNode(groupid, function(groupnode){

            $.each(arrayOfFiles, function(i, file) {
                file.done(function(fileInfo) {
                    createNewChildDomNode(fileInfo.cdnUrl, groupnode);
                });
            });
        });
    });
});

第 1 步：storeGroupOnServer()：

storeGroupOnServer = function(uuid, callback) {
    $.post('saveGroup.php', {uuid:uuid},
    function(data) {
        callback(data.groupid);
    },'json');
};

第 2 步：createGroupDomNode()：

createGroupDomNode = function(groupid, callback) {
    var cloner = $('#cloner');
    var newnode = cloner.clone(true);
    newnode.attr('id',groupid);
    newnode.removeClass('hide');
    cloner.after(newnode);
    callback(newnode);
}

第 3 步：createNewChildDomNode()：

function createNewChildDomNode(imgpath, groupdom){
    imgnode = $('<img/>').attr('src',imgpath);
    picnode = $('<picture/>').append(imgnode);
    $(groupdom).first().prepend(picnode);
}

【问题讨论】：

代码是否按原样工作？你能展示一个工作的例子吗？你是在问如何改变它以使其“更好”。如果是这样，这个问题就不是 Stack Overlow 的主题，更适合 codereview.stackexchange.com
如果您的目标环境支持，您可以使用async/await 语法。它在幕后使用 Promises，但允许您以同步样式的语法编写函数
@Taplar 是的，代码有效，但它是 Uploadcare 的一部分。共享整个代码有点麻烦。是的，这是要求改进此代码。感谢您对 Codereview 的建议。
使storeGroupOnServer 返回$.post 已经创建的承诺。不要回电。
createGroupDomNode 似乎是完全同步的。它根本不应该接受回调（也不创建承诺）。

标签： jquery promise es6-promise uploadcare

【解决方案1】：

无需重写整个内容即可开始，其余部分由您填写

groupPromise.then(function(fileGroupInfo){
   return fileGroupInfo.uuid;
})
.then(storeGroupOnServer)
.then(createGroupDomNode)....



// uuid argument comes from return in groupPromise.then()
storeGroupOnServer = function(uuid) {
  // return the ajax promise
  return $.post('saveGroup.php', {uuid: uuid}, null, 'json')
        .then(function(data) {
           // return to next then() in chain which calls createGroupDomNode()
            return data.groupid;
        });
}

【讨论】：

谢谢，这就是我一直在寻找的开始。赞赏。