Angular 5中调用HTTP接口后如何获取响应状态码？

我来帮你把这个连接校验的实现补全，这里有几个关键细节需要调整，才能正确拿到响应状态码：

首先得修改base.service里的方法——默认Angular的HttpClient.get()只会返回响应体内容，想要获取状态码，得让它返回完整的HTTP响应对象：

// base.service.ts
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';

/** 检查连接 */
checkConnection(url: string): Observable<HttpResponse<any>> {
  // 添加 { observe: 'response' } 配置，获取包含状态码的完整响应
  return this.http.get(url, { observe: 'response' });
}

接下来是组件里的实现，我优化了URL拼接的写法，同时完善了状态码获取和错误处理逻辑（毕竟连接校验很容易遇到失败场景）：

// 你的组件.ts文件
checkConnection(protocol: string, host: string, port: string): void {
  // 用ES6模板字符串替代多次concat，代码更简洁易读
  const url = `${protocol.toLowerCase()}://${host}:${port}`;
  
  this.baseService.checkConnection(url)
    .subscribe({
      next: (response) => {
        // 从完整响应对象中直接获取状态码
        const statusCode = response.status;
        console.log(`连接成功，状态码：${statusCode}`);
        // 这里可以根据状态码做后续业务逻辑，比如200代表服务正常
      },
      error: (err) => {
        // 处理各种失败情况：网络错误、404、500等
        if (err.status) {
          console.log(`连接失败，状态码：${err.status}`);
        } else {
          console.log('网络异常，请检查地址格式或网络连接');
        }
      }
    });
}

核心要点说明： #

• 获取完整响应：通过{ observe: 'response' }配置，HttpClient会返回包含状态码、响应头、响应体的HttpResponse对象，这是拿到状态码的关键。
• URL拼接优化：模板字符串比多次concat更直观，后续修改也更方便。
• 错误处理：连接校验场景下失败是常态，必须订阅error回调来覆盖各种异常情况，避免控制台报错和逻辑中断。

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