我们如何在 Angular 4 中获取 HttpClient 状态代码

Question

嗨，Angular 新手，我在获取 HTTP 模块中的 HTTP 状态代码时遇到问题，我可以使用response.status轻松获取响应代码，但是当我使用HttpClientModule 时，我无法获取 response.status，它显示找不到地位。

所以，我怎样才能得到使用response.statusHttpClient模块Angular 4&5。请帮忙。

休息提供者：-

@Injectable()
export class RestProvider {

  private apiUrl = 'https://restcountries.eu/rest/v2/al';

  constructor(public http: HttpClient) {
    console.log('Hello RestProvider Provider');
  }

  getCountries(): Observable<{}> {
    return this.http.get(this.apiUrl).pipe(
      map(this.extractData),
      catchError(this.handleError)
    );
  }

  private extractData(res: Response) {
    let body = res;
    return body || { };
  }

  private handleError (error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
      const err = error || '';
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }

}

主页：

export class HomePage {

  responseStatus: number;

  countries: any;
  errorMessage: string;

  constructor(public navCtrl: NavController, public navParams: NavParams, public rest: RestProvider) {
  }

  ionViewDidLoad() {
    this.getCountries();
  }

  getCountries() {
    this.rest.getCountries().subscribe(res =>{
      this.countries=res;
      console("status code--->"+res.status)
    },
    err=>{
      console("status code--->"+err.status)
    })

  }
}

Answer 1

添加方法observe : 'response'的标题选项，http.get例如

getCountries(): Observable<{}> {
    return this.http.get(this.apiUrl,{observe : 'response'}).pipe(
      map(this.extractData),
      catchError(this.handleError)
    );
  }

并订阅 get() 方法来获取主页中您想要的任何响应状态，就像您所做的那样

 getCountries() {
this.rest.getCountries().subscribe(
    res => {  this.countries=res;
  console("status code--->"+res.status)
},
err=>{
  console("status code--->"+err.status)
})
          },

Answer 2

要获得完整的响应，您需要为响应添加额外的属性，observe如下所示 -

getCountries(): Observable<{}> {
    return this.http.get(this.apiUrl, {observe: 'response'}).pipe(
      map(this.extractData),
      catchError(this.handleError)
    );
  }

有关更多信息，您可以参考 -

• https://angular.io/guide/http#reading-the-full-response
• HttpClient 获取状态 + 发送标头