【问题标题】:Angular 6/7 - get entire http response status in serviceAngular 6/7 - 在服务中获取整个 http 响应状态
【发布时间】:2019-10-07 09:46:35
【问题描述】:

我在 Angular 7 中有以下服务:

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

@Injectable()
export class UserService {

  private currentUserSubject: BehaviorSubject<any>;

  constructor(
    private http: HttpClient
  ) {
    this.currentUserSubject = new BehaviorSubject(null);
  }

  public get currentUserValue(): any {
    return this.currentUserSubject.value;
  }

  login(entity: any, inputUsername: any, inputPassword: any): any {

    const httpOptions = {
      headers: new HttpHeaders({
        username: inputUsername,
        password: inputPassword
      })
    };

    return this.http.get(entity.url, httpOptions)
    .pipe(map((user: Response) => {
      console.log(user);
      console.log(user.status);

      if (user) {
          this.currentUserSubject.next(user);
      }
      return user;
  }));
  }
}

我想获取响应状态(200、401 等)。如果我尝试订阅诸如 .pipe(map(.....)).subscribe(...) 之类的订阅,则会收到错误消息,即订阅不是函数。

另外,我在 pipe(map()) 中只得到 200 个状态响应。我在这里没有收到其他状态代码的响应。

我想根据收到的状态更新 BehaviorSubject。

如何获取服务中的所有响应及其状态?

我去过Angular 6 Get response headers with httpclient issue,但这不适用于这里。

我在 http 标头中添加了 observe: 'response',但没有任何区别。

const httpOptions = {
      headers: new HttpHeaders({
        username: inputUsername,
        password: inputPassword,
        observe: 'response',
      }),
    };

【问题讨论】:

  • 所以您使用的是{observe: 'response'},但它不起作用?
  • @TonyNgo 如何在我的 httpOptions 中添加 {observe: 'response'}?
  • @TonyNgo {observe: 'response'} 对我不起作用

标签: angular angular-httpclient


【解决方案1】:

我就是这样做的:

this.http.get(this.url, { observe: 'response' })
  .subscribe(response => console.log(response.status));

使用 Angular HttpClient 并订阅从 http.get 返回的 observable。

【讨论】:

  • 但我还需要在请求中传递我的标头。如何在我的 httpOptions 中添加 {observe: 'response'}?
  • 从 '@angular/common/http' 导入 { HttpHeaders };因此,您将按如下方式构建标头: let headers = new HttpHeaders(); headers = headers.set('Authorization', 'Basic xzeydyt==');
【解决方案2】:

在 Angular 7 中,向请求添加标头的最佳方法是使用拦截器。在拦截器中,您可以向请求添加标头,因此,您可以访问受保护的 API。这是向请求添加标头的拦截器示例:

       intercept(request: HttpRequest<any>, next: HttpHandler): 
            Observable<HttpEvent<any>> {
            let currentUser = this.authservice.currentUser;
         if (currentUser && currentUser.token) {
           request = request.clone({
           setHeaders: {
           Authorization: `Bearer ${currentUser.token}`
           }
          });
         }

         return next.handle(request)

【讨论】:

    【解决方案3】:

    告诉HttpClient您想要使用观察选项的完整回复:

    const httpOptions:any = {
      headers: new HttpHeaders({
        username: inputUsername,
        password: inputPassword
      }),
      observe: 'response',
    };
    return this.http.get<any>(entity.url, httpOptions) //I put the type of the response data as `any` you can put the type of user
     .pipe(map((user: HttpResponse<any>) => {//same type as above statement
       console.log(user);
       console.log(user.status);
    
       if (user) {
          this.currentUserSubject.next(user);
       }
       return user;
     }));
    

    现在 HttpClient.get() 返回一个类型为 HttpResponse 的 Observable,而不仅仅是 JSON 数据。

    【讨论】:

    • 我收到错误:“观察”属性的类型不兼容。类型 'string' 不可分配给类型 '"body"'。
    • 你能把httpOptions 输入any。我在答案中编辑了它
    • 添加任何给我错误:“响应”类型缺少“ArrayBuffer”类型的以下属性:字节长度、切片、[Symbol.toStringTag]
    • 你能检查一下编辑后的代码吗?我添加了您在问题中提出的管道
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-03-15
    • 1970-01-01
    • 1970-01-01
    • 2021-08-07
    • 2018-09-14
    • 1970-01-01
    • 2019-04-15
    相关资源
    最近更新 更多