代码之家 › 专栏 › 技术社区 › bart

如何使用.done()和.then()将嵌套jquery承诺转换为平面代码结构

uploadcare es6-promise promise jquery

-1

bart · 技术社区 · 7 年前

下面的代码使用jquery promises结合回调执行以下操作:

使用将组uuid保存到服务器 storeGroupOnServer()
使用创建组的dom元素 createGroupDomNode()
为每个图像创建子元素,使用 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);
}

1 回复 | 直到 7 年前

1

0

charlietfl 7 年前

不必重写全部内容就可以开始

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;
        });
}