Как правильно организовать сложную цепочку ajax-запросов?

Question

[Anton Kuzmichev]

Добрый день!
Сейчас реализовываю довольно сложный процесс на веб-странице с помощью последовательный цепочки ajax-запросов. Причём, имеется дополнительная сложность в виде некоей "ветвистости", которую, собственно, и не могу преодолеть.

Имеется 2 метода, реализующих 2 ветки алгоритма:
Первый метод, основная ветка:

this.start = function(){
    // останавливаем репликацию
    return this.stopAndClearExistsReplication().always(function(){
        // удаляем локальную БД
        return this.deleteLocalDB().always(function(){
            // создаём локальную БД
            return this.createLocalDB().done(function(){
                // ставим БД на репликацию
                return this.addReplicationDocument().done(function(){
                    // ставим репликацию на отслеживание
                    return this.replicationMonitoring();
                });
            });
        });
    });
};

Второй метод, реализовано в методе stopAndClearExistsReplication:

this.stopAndClearExistsReplication = function(){
    return this.stopDBReplication().always(function(){
        return this.getReplicationDocument().done(function(doc){
            return this.removeReplicationDocument(doc);
        });
    });
};

Задумывалась примерно такая последовательность и причинно-следственная связь:

1. вызываем stopAndClearExistsReplication()
   
   1. вызываем stopDBReplication()
      
   2. В ЛЮБОМ СЛУЧАЕ вызываем getReplicationDocument()
      
   3. В СЛУЧАЕ УСПЕХА вызываем removeReplicationDocument()
      
   
   
2. В ЛЮБОМ СЛУЧАЕ вызываем deleteLocalDB()
   
3. ... ну и далее по первой ветке, с выполнением которой вроде проблем нет, там всё последовательно
   

Хочется, чтобы пока вся вторая ветка не отработает, то первая (основная) ветка не продолжала выполняться. Однако они начинают выполняться параллельно, из-за чего, конечно же, всякие ошибки. Например, когда метод removeReplicationDocument из второй ветки не успел отработать перед addReplicationDocument из первой.

Как можно грамотно реализовать эту цепочку ajax-вызовов с помощью jQuery?

Answer 1

[kurtov]

this.start = function(){
    // останавливаем репликацию
    return this.stopAndClearExistsReplication()
        // удаляем локальную БД
        .always(function(){ return this.deleteLocalDB() })
        // создаём локальную БД
        .always(function(){ return this.createLocalDB() })
        // ставим БД на репликацию
        .done(function(){ return this.addReplicationDocument() })
        // ставим репликацию на отслеживание
        .done(function(){ return this.replicationMonitoring() });
};

По примеру похоже что вы в каждом предыдущем методе bind`ите правильный this так что можно вынести в функции выше.

this.start = function(){
    // останавливаем репликацию
    return this.stopAndClearExistsReplication()
        // удаляем локальную БД
        .always(deleteLocalDB)
        // создаём локальную БД
        .always(createLocalDB)
        // ставим БД на репликацию
        .done(addReplicationDocument)
        // ставим репликацию на отслеживание
        .done();
};

function deleteLocalDB(){ return this.deleteLocalDB() }
function createLocalDB(){ return this.createLocalDB() }
function addReplicationDocument(){ return this.addReplicationDocument() }
function replicationMonitoring(){ return this.replicationMonitoring() }

Если доступны стрелочные функции и this один на все методы

this.start = function(){
    // останавливаем репликацию
    return this.stopAndClearExistsReplication()
        // удаляем локальную БД
        .always(() => this.deleteLocalDB())
        // создаём локальную БД
        .always(() =>  this.createLocalDB())
        // ставим БД на репликацию
        .done(() => this.addReplicationDocument())
        // ставим репликацию на отслеживание
        .done(() =>  this.replicationMonitoring());
};

Если есть промисы и имена методов не требуют капитанских комментариев

this.start = function(){
    return Promise.resolve()
        .then(() =>  this.stopAndClearExistsReplication())
        .always(() => this.deleteLocalDB())
        .always(() =>  this.createLocalDB())
        .done(() => this.addReplicationDocument())
        .done(() =>  this.replicationMonitoring());
};

Comments

[kurtov]

Последний вариант не корректен, т.к. нативный Promise не имеет методов .always и .done.

[Anton Kuzmichev]

kurtov: а получитсяч вместо always использовать then.catch.then с подавлением исключения в catch?

[kurtov]

Anton Kuzmichev: да

[kurtov]

return Promise.resolve()
.then(() => method1())
.then(() => method2())
.catch(() => onError1())
.then(() => method3())
.catch(() => onError2());

Последний catch ловит все ошибки. Если ошибка случилась в method1или в method2, то в onError1 появится ошибка, тут можно принять решение, продолжить дальше вернув resolve (перейдем к method3) или прекратить работу вернув reject (перейдем в onError2).