Question

我正在研究一个示例应用程序，其中有一个登录组件，该组件调用身份验证服务。该服务依次进行Http调用，并根据调用的响应进行操作。

在该服务中，当我的用户能够登录时，我正在使用http Post以及subscribe来做一些事情，但是，我希望我的组件函数从我的操作中吸收此响应并进行相应的操作。

下面是代码： 登录组件：

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调用返回给组件并在其中编写整个逻辑，但这不是我期望的。我希望是否有更好的方法可以做到这一点。

Answer 1

你可以写

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();
});

Answer 2

尝试将可观察对象返回到您的登录组件中并在其中进行订阅。然后，如果请求成功，您可以做自己想做的事情

Answer 3

也许您可以尝试以下方法：

服务

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

  }
}

Answer 4

使用RxJS Operators作为服务逻辑，并从服务中返回修改后的Observable。

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

Answer 5

只需使用of运算符：

import { of } from 'rxjs';
return this.http.post('...url..', payload).subscribe(data => {
   //some stuff
  return of(true);
  }, () => return of(false);
})

Answer 6

我认为您正在寻找异步并等待， How To Use Async and Await

从http Post

6 个答案: