Возврат Наблюдаемый от http Post - PullRequest
Новая
       26

Возврат Наблюдаемый от http Post

0 голосов
/ 19 февраля 2019

Я работаю над примером приложения, где у меня есть компонент Login, который вызывает службу аутентификации.Служба, в свою очередь, выполняет Http-вызов, и, основываясь на ответе на звонок, мне нужно что-то сделать.

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

Ниже приведен код: Компонент входа: 

this.authService.login(this.userName, this.password)

Служба аутентификации 

 return this.http.post('http://localhost:8080/login',{
  "username": userName,
  "password": password
}).subscribe(data => {
   //some stuff
  return true;
  }, () => return false;
})

Я хочу, чтобы мой LoginComponent ждал, пока он не получит истину или ложь от службы.

Один из способов сделать это - просто вернутьhttp перезванивает компоненту и пишет там всю логику, но это не то, чего я с нетерпением жду.Я надеялся, что есть лучший способ сделать это.

Ответы [ 5 ]

0 голосов
/ 19 февраля 2019

Используйте Операторы RxJS для своей логики Сервиса и возвращайте измененную Наблюдаемую из своей Сервиса. 

import { tap, map, catchError } from 'rxjs/operators';

login(userName: string, password: string): Observable<boolean> {
  return this.http.post('http://localhost:8080/login', { userName, password })
    .pipe(
      tap(data => doSideEffects(data)), // do side effects
      map(data => true), // modify the data and return the value you care for
      catchError(error => of(false)) // return an Observable with the value that should be returned on errors
    );
}

Всегда подписывайтесь на свои Компоненты. 

this.authService.login(this.userName, this.password)
  .subscribe(value => /* value will be true on success and false on errors */);
// the error callback will be never executed here as you caught the error with catchError 
// in the Service an returned a default value for errors there
0 голосов
/ 19 февраля 2019

Может быть, вы можете попробовать это:

Сервис 

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()

export class AuthService {
  constructor (private client:HttpClient) { }

  logIn(userName:string, password:string):Observable<boolean> {
    return (this.client.post('myUrl', {'userName': userName,'pwd':password}).pipe(
      map(resp => {
        // perform logic
        const allowed:boolean = resp['authenticated'];
        return allowed;
      })
    ));
  }

}

Компонент 

import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  name = 'Angular';
  constructor(private authSvc:AuthService) { }
  authObservable$:Observable<boolean>;
  ngOnInit() {
    this.authObservable$ = this.authSvc.login('myUser', 'myPwd');

    // can use authObservable$ in template with async pipe or subscribe

  }
}
0 голосов
/ 19 февраля 2019

Попробуйте вернуть наблюдаемое в ваш компонент входа и подписаться там.Тогда вы можете делать то, что вы хотите, если запрос выполнен

0 голосов
/ 19 февраля 2019

Я думаю Async и Await - это то, что вы ищете, Как использовать Async и Await

0 голосов
/ 19 февраля 2019

Вы можете написать 

import { Observable } from 'rxjs/internal/Observable';

и 

return new Observable((subscriber) => {
    this.http.post('http://localhost:8080/login', {
        userName,
        password,
    }).subscribe(data => {
        //some stuff
        subscriber.next(true);
    }, () => subscriber.error();
});
...