Угловая 2 - проверка ошибок сервера от подписки

Я чувствую, что этот сценарий должен быть в документах Angular 2, но я не могу найти его нигде.

Здесь сценарий

  1. отправить форму (создать объект), которая недействительна на сервере
  2. сервер возвращает 400 плохих запросов с ошибками, отображаемыми на форме
  3. после того, как подписка вернется, я хочу проверить переменную ошибки или что-то (то есть, если нет ошибок> затем перейдите на вновь созданную страницу подробностей)

Я полагаю, что он работает примерно так:

this.projectService.create(project)
    .subscribe(
        result => console.log(result),
        error => {
            this.errors = error
        }
    ); 
}

if (!this.errors) {
    //route to new page
}

Я очень новичок в Angular 2, так что это может произойти из-за моего понимания того, как работает Observable. У меня нет проблем с отображением этих данных в форме, но я не могу понять, как это увидеть в компоненте ts. Я просто хочу проверить успех/неудачу http create.

Ответы

Ответ 1

Как указано в соответствующей документации RxJS, метод .subscribe() может принимать третий аргумент, который вызывается при завершении, если ошибок нет.

Для справки:

  1. [onNext] (Function): Функция для вызова для каждого элемента в наблюдаемой последовательности.
  2. [onError] (Function): Функция для вызова при исключительном завершении наблюдаемой последовательности.
  3. [onCompleted] (Function): функция, вызываемая при грациозном завершении наблюдаемой последовательности.

Поэтому вы можете обрабатывать свою логику маршрутизации в onCompleted вызове, поскольку он будет вызван изящным окончанием (что подразумевает, что при его вызове не будет никаких ошибок).

this.httpService.makeRequest()
    .subscribe(
      result => {
        // Handle result
        console.log(result)
      },
      error => {
        this.errors = error;
      },
      () => {
        // 'onCompleted' callback.
        // No errors, route to new page here
      }
    );

В качестве побочного примечания существует также метод .finally() который вызывается при завершении независимо от успеха/отказа вызова. Это может быть полезно в сценариях, где вы всегда хотите выполнить определенную логику после HTTP-запроса независимо от результата (т.е. Для целей ведения журнала или для некоторого взаимодействия с пользовательским интерфейсом, такого как показ модальности).

Rx.Observable.prototype.finally(action)

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

Например, вот пример:

import { Observable } from 'rxjs/Rx';
import 'rxjs/add/operator/finally';

// ...

this.httpService.getRequest()
    .finally(() => {
      // Execute after graceful or exceptionally termination
      console.log('Handle logging logic...');
    })
    .subscribe (
      result => {
        // Handle result
        console.log(result)
      },
      error => {
        this.errors = error;
      },
      () => {
        // No errors, route to new page
      }
    );

Ответ 2

Вы можете добиться следующим образом

    this.projectService.create(project)
    .subscribe(
        result => {
         console.log(result);
        },
        error => {
            console.log(error);
            this.errors = error
        }
    ); 
}

if (!this.errors) {
    //route to new page
}