2017-02-08 15 views
7

Я чувствую, что этот сценарий должен быть в документах Angular 2, но я не могу найти его нигде.Угловая 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.

ответ

24

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

Для справки:

  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() method, который называется по завершению независимо от успеха/неуспеха вызова. Это может быть полезно в сценариях, где вы всегда хотите выполнить определенную логику после 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 
     } 
    ); 
+1

Из всех ответов, которые я нашел в отношении обработки ошибок наблюдаемых, это лучший. спасибо –

1

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

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

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

 Смежные вопросы

  • Нет связанных вопросов^_^