在Ionic 3中使用HttpClient发送带Header的GET请求并获取响应状态

没问题，我来帮你解决这个问题！在Ionic 3里用HttpClient获取请求的响应状态码其实很简单，只需要调整一下请求选项，然后正确订阅Observable就可以了。

完整解决方案代码 #

首先，确保你已经在模块中导入了HttpClientModule，然后在组件里可以这样写：

import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

// 你的组件类
export class YourComponent {
  constructor(private http: HttpClient) {}

  checkLoginStatus(): void {
    const email = "test@email.com";
    const password = "password";
    const headers = new HttpHeaders({
      'email': email,
      'password': password
    });

    // 发送GET请求，指定observe: 'response'获取完整响应对象
    this.http.get('http://127.0.0.1:8000/api/login', { 
      headers: headers,
      observe: 'response' // 核心配置：获取包含状态码的完整响应
    }).pipe(
      catchError(this.handleError) // 全局捕获请求错误
    ).subscribe(
      (response) => {
        // 请求成功时获取状态码
        const status = response.status;
        if (status === 200) {
          // 这里写状态码200时的逻辑，比如跳转首页、提示成功
          console.log('验证通过，执行成功逻辑');
        } else {
          // 处理其他成功状态码（比如201、204等）
          console.log(`收到状态码${status}，执行对应逻辑`);
        }
      },
      (error) => {
        // 请求失败时处理错误状态码
        if (error instanceof HttpErrorResponse) {
          const errorStatus = error.status;
          console.log(`请求失败，状态码：${errorStatus}`);
          if (errorStatus === 401) {
            // 未授权，比如用户名密码错误
            console.log('用户名或密码不正确');
          } else if (errorStatus === 404) {
            // 请求地址不存在
            console.log('API地址错误');
          } else if (errorStatus === 500) {
            // 服务器内部错误
            console.log('服务器异常，请稍后重试');
          }
          // 可以继续添加其他错误状态码的处理逻辑
        }
      }
    );
  }

  // 统一错误处理方法
  private handleError(error: HttpErrorResponse): Observable<never> {
    console.error('请求发生错误:', error.message);
    return throwError(() => new Error(`请求失败，状态码：${error.status}`));
  }
}

关键要点说明 #

• observe: 'response'的作用：默认情况下，HttpClient的get方法只会返回响应体（也就是你提到的JSON数据）。加上这个配置后，我们就能拿到完整的HTTP响应对象，里面包含了状态码、响应头、响应体等所有信息。
• 订阅Observable：HttpClient的请求是异步操作，必须调用subscribe()方法才会真正发送请求，同时在回调里处理成功和失败的情况。
• 错误状态码处理：请求失败时（比如401、404、500），错误会被catchError捕获，我们可以通过HttpErrorResponse对象获取具体的错误状态码，针对性处理不同的异常场景。

额外建议 #

通常登录请求更推荐使用POST方法，把用户名和密码放在请求体里（而不是请求头），这样更符合REST规范，也更安全。如果需要改成POST，代码可以这样调整：

this.http.post('http://127.0.0.1:8000/api/login',
  { email: email, password: password }, // 把参数放在请求体中
  { observe: 'response' }
).pipe(
  catchError(this.handleError)
).subscribe(
  (response) => { /* 成功逻辑 */ },
  (error) => { /* 错误逻辑 */ }
);

内容的提问来源于stack exchange，提问作者blackstar012