Angular 2, почему мои 4 вызова API не ждут завершения предыдущего вызова перед выполнением?

У меня есть _1 _ / _ 2_, который должен выполнить 4 отдельных вызова API, чтобы «сохранить». На самом деле, только одна из этих транзакций должна ждать остальных 3, но я все равно хотел связать все 4 из них на всякий случай.

Вот как я его настраиваю:

save() {
    this.save1(saveObject1)
        .subscribe(response => {
            if (response === 0) {
                this.processErrorResult('save1');
            }

            this.save2(saveObject2)
                .subscribe(response2 => {
                    if (response2 === 0) {
                        this.processErrorResult('save1');
                    }

                    this.save3(saveObject3)
                        .subscribe(response3 => {
                            if (response3 === 0) {
                                this.processErrorResult('save1');
                            }

                            if (this.noErrorsInFirst3Saves()) {
                                this.save4(saveObject4)
                                    .subscribe(response4 => {
                                        if (response4 === 0) {
                                            this.processErrorResult('save1');
                                        }

                                        if (!this.hasErrors()) {
                                            this.router.navigate(['confirmation']);
                                        }
                                    });
                            }
                        });
                });
        });
}

private save1(saveObject: any): Observable<int> {
    this.api.save1(saveObject)
        .subscribe(successful => {
            return Observable.of(1);
        }, failed => {
            return Observable.of(0);
        });
}

private save2(saveObject: any): Observable<int> {
    this.api.save2(saveObject)
        .subscribe(successful => {
            return Observable.of(1);
        }, failed => {
            return Observable.of(0);
        });
}

private save3(saveObject: any): Observable<int> {
    this.api.save3(saveObject)
        .subscribe(successful => {
            return Observable.of(1);
        }, failed => {
            return Observable.of(0);
        });
}

private save4(saveObject: any): Observable<int> {
    this.api.save4(saveObject)
        .subscribe(successful => {
            return Observable.of(1);
        }, failed => {
            return Observable.of(0);
        });
}

Внутри каждой из этих save{number} функций у меня есть сообщения журнала, поэтому я точно знаю порядок, в котором эти функции выполняются (и ответы возвращаются).

Когда я нажимаю кнопку «Сохранить», он [почти] немедленно перенаправляется на мою страницу подтверждения, после чего я могу сидеть и смотреть в окно консоли в инструментах Chrome dev и видеть, как начинают поступать ответы на вызовы API.

Почему эта установка не принимает явное связывание этих транзакций? Я знаю, что в Angular 1 это было очень легко сделать с promise и с .then(response => {});.

Единственное, что я могу придумать, отличается, это для КАЖДОГО вызова API, будь то _8 _ / _ 9 _ / _ 10 _ / _ 11_, он всегда показывает 2 вызова на сетевой панели инструментов chrome dev. Первый вызов имеет RequestMethod, установленный на Options, а последующий вызов - это соответствующий _14 _ / _ 15 _ / _ 16 _ / _ 17_ с соответствующим установленным RequestMethod.

Я не помню, чтобы когда-либо видел эти (дублированные вызовы) ни в одном из моих недавних приложений, над которыми я работал (возможно, я просто никогда не обращал на это внимания), так что, возможно, это просто стандартная операционная процедура для вызовов API.

Есть идеи здесь?

Изменить: в ответ на предложенный ниже ответ Гарри

Я пытаюсь реализовать ваш ответ, но все еще немного запутался в том, как реализовать, вот более подробный взгляд на мою настройку:

private save1(saveObject: any): Observable<number> {
    if (saveObject.hasChanges()) {
        return this.api.save1(saveObject)
            .map(successful => {
                return this.parseSaveResponse(successful, saveObject, true); // true indicates a successful API response
            })
            .catch(failed => {
                return this.parseSaveResponse(successful, saveObject, false); // false indicates a successful API response
            });
    } else {
        return Observable.of(-1); // no changes necessary, return immediately
    }
}

private parseSaveResponse(response: any, saveObject: any, transactionSuccessful: boolean) {
    this.logService.logTransaction({transactionType}, saveObject, response, transactionSuccessful);

    if (!transactionSuccessful) {
        // add to error list object to be displayed on the form
        return 0;
    }

    return 1;
}

Когда он дошел до этого момента, он выдает мне ошибку в строке .catch({});, говорящую:

Аргумент типа '(ошибка: любая) => 0 | 1 'не может быть назначен параметру типа' (err: any, catch: Observable ‹0 | 1>) => ObservableInput‹ {}> '. Введите '0 | 1 'не может быть назначен типу' ObservableInput ‹{}> '. Тип '0' нельзя присвоить типу 'ObservableInput ‹{}>'.)