发送空GET请求至谷歌API，无法将响应头日期赋值给全局变量

一、先搞定原生XMLHttpRequest的问题 #

你碰到的Property 'dateTime' does not exist on type 'XMLHttpRequest'错误，本质是TypeScript对XMLHttpRequest的类型定义里压根没有dateTime这个属性，直接给XHR对象加自定义属性会触发类型检查报错。正确的思路是从响应头拿到日期值后，直接赋值给你的全局/组件变量，而不是往XHR对象上挂属性。

这里给你修正后的代码示例（假设你是在Angular组件里编写的）：

// 组件类中声明全局变量
dateTime: string | null = null;

getDateTimeViaXHR() {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', 'http://www.googleapis.com', true);
  
  xhr.onload = () => {
    if (xhr.status === 200) {
      // 从响应头获取标准的Date字段（服务器返回的当前时间）
      const serverDate = xhr.getResponseHeader('Date');
      // 直接赋值给你的this.dateTime变量
      this.dateTime = serverDate;
      console.log('获取到的日期时间:', this.dateTime);
    }
  };

  xhr.onerror = () => {
    console.error('请求失败，请检查网络或地址');
  };

  xhr.send();
}

核心要点：别试图给xhr对象加自定义属性，把拿到的Date头值直接存到你自己的this.dateTime里，类型错误自然就消失了。

二、用Angular自带的HttpClient实现（更推荐） #

在Angular项目里，官方更推荐用HttpClient处理HTTP请求——它自带类型支持、基于Observable的异步处理，比原生XHR更贴合Angular的开发规范。步骤如下：

1. 先在模块中导入HttpClientModule #

打开你的AppModule（或对应的功能模块），导入并添加到imports数组：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // 导入HttpClientModule

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule], // 添加到imports列表
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 在组件中注入HttpClient并发送请求 #

在你的组件类中注入HttpClient，然后发送GET请求并获取响应头：

import { Component } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  dateTime: string | null = null;

  // 构造函数中注入HttpClient
  constructor(private http: HttpClient) { }

  getDateTimeViaAngularHttp() {
    // 使用{ observe: 'response' }选项，获取包含响应头的完整HttpResponse对象
    this.http.get('http://www.googleapis.com', { observe: 'response' })
      .subscribe({
        next: (response: HttpResponse<any>) => {
          // 从响应头中提取Date字段
          const serverDate = response.headers.get('Date');
          this.dateTime = serverDate;
          console.log('通过Angular Http获取的日期:', this.dateTime);
        },
        error: (err) => {
          console.error('请求出错:', err);
        }
      });
  }
}

为什么推荐这个方案？ #

• 类型安全：HttpClient支持泛型，能和TypeScript完美配合
• 异步友好：基于Observable，支持管道操作（比如映射、过滤数据）
• 内置功能：自动处理JSON解析、支持拦截器（统一加请求头、全局错误处理）

不管是原生XHR的修正方案，还是Angular官方的HttpClient方案，都能顺利把服务器返回的日期时间赋值给this.dateTime变量啦。

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