Как обрабатывать ответы от сервера с использованием Observable?

Question

[Максим Тарабрин]

Поясните, пожалуйста, как обрабатывать ответы от сервера с использованием объекта observable?
У меня настроен роутинг и стоит защитник, который проверяет токен на валидность. Это некоторая песочница, разбираюсь что к чему в angular'e. Если допустим я в токен загоню не валидный или вообще 0 например. Как работать в этом случае?

AuthenticationGuard(Проверка токена на валидность)

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
      if(localStorage.getItem('Token')){
        let token = localStorage.getItem('Token');
        this.authService.verifyToken(token)
                        .subscribe(res => {
                          if(res['token'] == token){
                            this.router.navigate(['/login']);
                          }
                        });
        return true
      } else {
        this.router.navigate(["/login"]);
      }
  }

AuthService

backendUrl = "http://127.0.0.1:8000/";
  constructor(private http: Http,
              private router: Router) { }

  verifyToken(token: string): Observable<{}>{
    let urlVerify = 'api-token-verify'
    let headers = new Headers({'Content-Type':'application/json'});
    let options = new RequestOptions({headers: headers});
    return this.http.post(this.backendUrl+'api-token-verify/', {token}, options)
      .map((response: Response) => response.json())
      .catch(this.handleError);
  }

  handleError(error: any){
    return Observable.throw(error.message || error.json());
  }

Answer 1

[Николай]

Guard в данном случае должен отдавать Observable, или Promise, и реузльтатом должно быть true/false в зависимости от того, успешно прошла проверка или нет.

return this.authService.verifyToken.map(res => res['token'] === token);

Вот тут есть пример: https://stackoverflow.com/questions/38425461/angul...

Comments

[Максим Тарабрин]

Окей, а как ошибки принимать добром? Чтобы получить например ошибку от сервера и затем например отобразить ее в шаблоне компонента?

[Николай]

Так же как и раньше вы делали в AuthService, при помощи catch.

[Максим Тарабрин]

Николай: окей, я маленько по маленьку стал раздуплять. А избавиться от от ошибка которая вызвана ретурном observable как то возможно?

[Николай]

Может дело в том что у вас handleError делает throw, а этот throw потом не обрабаыватеся нигде?

[Максим Тарабрин]

Ааа, ааа. Я понял. Спасибо, мой золотистый.

[Максим Тарабрин]

Николай: а ту ошибку что выше возникает, как то потереть можно?
POST
XHR
127.0.0.1:8000/api-token-verify [HTTP/1.0 400 Bad Request 6мс]

[Николай]

Максим Тарабрин: неа, это стандартное поведение браузера.

[Максим Тарабрин]

Николай: такой еще вопрос. Почему после возврата return true при canActivate, я не могу попасть в свой раздел about. Меня не пускает, я сижу в home

authGuard

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
      if(localStorage.getItem('Token')){
        let token = localStorage.getItem('Token');
        this.authService.verifyToken(token).subscribe(
          data => {
            // Я проверил, нахожусь я здесь, если всё ок. Проверял через console.log()
            // Тоесть мне возвращает true.
            return true;
          },
          error => {
            for(let i=0;i<error.length;i++){
              console.log(error[i]);
            }
            this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
            return false;
          }
        );
      }else{
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
        return false;
      }
    }

[Николай]

Ну эта функция потому что ничего не возвращает.
Представьте что Observable - это просто промис.
Тогда ваша функция выглядит абстрактно так:

function() {
    promise.then(function(result) {
         return true;
    }
}

[Максим Тарабрин]

Николай: аааа, окей. Тоесть получается мне нужна какая то переменная тригер.

let result_guard;
function() {
    promise.then(function(result) {
         result_guard = true;
    }
if(result_guard){
    return true;
}
return false;
}

[Николай]

нееееееет!
Вообще удивительно что тайпскрипт вас не карает. У вас же явно написано про возвращаемое значение:
: Observable<boolean> | Promise<boolean> | boolean
Собственно нужно вернуть либо Observable<boolean>, т.е. как-то так:

return this.authService.foo().map(response => response.bar ? true : false );

Либо сконвертить в промис и вернуть его.

[Максим Тарабрин]

Николай: вообщем я туплю что то и не понимаю, объясню ситуацию. Я в Guard компоненте делаю запрос через сервис authService и в аргументе прописываю токен из localstorage.

Код authenticationGuard:

let token = localStorage.getItem('Token');
      if(token){
        return this.authService.verifyToken(token).map(result => result['token'] === token);
      }else{
        this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
        return false;
      }

Затем в сервисе делаю сам запрос к серверу и пытаюсь как то его обработать. Указываю функцию-обработчик ошибок handleError. Но по итогу мне надо всеравно вернуть observable объект. Я возвращаю, но по итогу у меня в Guard компоненте никто не обрабатывает throw и поэтому ошибка в консоле.

Код authService:

verifyToken(token: string): Observable<{}>{
    let urlVerify = 'api-token-verify'
    let headers = new Headers({'Content-Type':'application/json'});
    let options = new RequestOptions({headers: headers});
    return this.http.post(this.backendUrl+'api-token-verify/', {token}, options)
                    .map(res => res.json().data)
                    .map(result => result['token'] === token)
                    .catch(this.handleError);
  }

  handleError(error: any){
    console.log('Произошла ошибка: ',error.json()['non_field_errors'][0]);
    return Observable.throw(error.json()['non_field_errors'][0]);
  }

Помоги разобраться. Вообще не понятно что то.

[Николай]

Вы сами должны определиться, как вы хотите обрабатывать ошибки, вариантов в целом два:
1. бросать throw наверх
2. отдавать обычный Observable с каким-то флагом, значением, обозначающим ошибку.
В зависимости от этого ваша дальнейшая логика работы с сервисом отличается
В первом случае подписываться на .error всегда при обращении к сервису
Во втором случае - в subscribe/map проверять, что запрос был успешен
Как удобнее? Мне нравится первый вариант, он как-то нагляднее. Ошибка попадает в хэндлер ошибки, а не куда либо ещё. Но в некоторых случаях бывает выгодно проглатывать ошибки и возвращать всегда "хороший" Observable.

[Максим Тарабрин]

Николай: приведи пример 1-го варианта в коде.

[Максим Тарабрин]

Подписываемся в сервисе в самом? при непосредственно запросе или в хендлере? И что должен принимать и отдавать subscribe? Вот эти моменты непонятны.

[Николай]

первый вариант у вас и так есть, вам не хватает только .catch вот тут:

return this.authService.verifyToken(...).map(...)<b>.catch(...)</b>

Разберитесь с тем, как идет выполнение.
HTTP SERVICE.....................AuthFactory..............................................AuthGuard
в случае успеха:
HTTP -> Observable ->........map(*в json*) -> map(*взяли токен*) ->......subscribe()
в случае неудачи:
HTTP -> ObservableError -> catch(Error -> Throw ObservableError) -> .catch(*обработка ошибки*)
Курсивом отмечена часть, которой у вас нет

[Максим Тарабрин]

Я правильно понимаю, что в компоненте guard можно вызвать вместо map и catch, вызвать subscribe. только втором параметром метода при обработке ошибки надо вернуть объект observable true или false, но я не знаю как. Также если использовать метод catch то тоже надо вернуть тот же объект с true или false. Как это сделать понятия не имею.

[Николай]

Нет.
subscribe ничего не возвращает.
Вам нужно чтобы после ваших проверок в вашу цепочку попал Observable, который уже будет обрабатываться роутером. Для этого достаточно сделать return true/return false в map.
В catch нужно вернуть Observable, т.е. Observable.of(value);

[Максим Тарабрин]

Николай: так понятно, буду дома - попробую. Об методе .of я не слышал. Где я смогу ознакомиться с rxjs поближе, кроме офф документации?

[Николай]

https://www.learnrxjs.io/
Вот тут хорошо написано, есть ссылки на то, что ещё можно посчитать.

[Максим Тарабрин]

Николай: спасибо тебе большое за объеснение. Счастья тебе, здоровья тебе и твоей семье, дай бог тебе здоровья) Всё Ок, ошибка пропадает, но что должен принимать метод .of, какое значение?

[Максим Тарабрин]

Николай: Обработка ошибки, вывод ее в консоль или куда угодно должно происходить в компоненте или в сервисе?

[Николай]

Максим Тарабрин: ну обычно есть какой-то компонент, который показывает ошибки. Ему нужно эту ошибку пихнуть как-нибудь. Всё зависит от реализации.
Метод .of (https://github.com/Reactive-Extensions/RxJS/blob/m...
просто превращает arg в Observable(arg). Твой гвард должен возвращать Observable, так что true/false.