Как превратить вложенные jQuery Promises в плоскую структуру кода, используя .done () и .then () - PullRequest
Новая
       53

Как превратить вложенные jQuery Promises в плоскую структуру кода, используя .done () и .then ()

0 голосов
/ 16 ноября 2018

Код ниже с использованием обещаний jQuery в сочетании с обратными вызовами выполняет следующие действия:

  1. Сохраняет UUID группы на сервере, используя storeGroupOnServer()
  2. Создает элемент DOM для группы, используя createGroupDomNode()
  3. Создает дочерние элементы для каждого изображения, используя 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 Ответ

0 голосов
/ 16 ноября 2018

даст старт без необходимости переписывать все это и позволит вам заполнить все остальное 

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