如何将XMLHttpRequest代码改为Angular 5 HttpClient PUT请求？

没问题，我来帮你把这段XHR代码转换成Angular 5的HttpClient实现，步骤很清晰，而且更符合Angular的最佳实践：

第一步：引入HttpClientModule #

首先得在你的模块（比如AppModule或者对应功能模块）里导入并注册HttpClientModule，不然没法使用HttpClient服务：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // 其他你需要的模块，比如BrowserModule等
    HttpClientModule
  ]
})
export class AppModule { }

第二步：在组件/服务中注入HttpClient #

接下来，在你要发起请求的组件或者服务里，注入HttpClient服务，同时导入需要的HttpHeaders和Observable：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 注入HttpClient
  constructor(private http: HttpClient) { }
}

第三步：编写PUT请求方法 #

对应你原来的XHR逻辑，我们写一个专门的方法来发送XML格式的PUT请求，这里要注意两个关键点：

• 设置Content-Type为text/xml
• 指定响应类型为text（因为HttpClient默认期望JSON响应，而原XHR获取的是文本响应）

// 定义发送PUT请求的方法，返回Observable<string>以便订阅
sendXmlPutRequest(xmlData: string): Observable<string> {
  const requestUrl = 'my url here'; // 替换成你的实际接口URL
  // 构造请求头
  const requestHeaders = new HttpHeaders({
    'Content-Type': 'text/xml'
  });

  // 发起PUT请求
  return this.http.put(requestUrl, xmlData, {
    headers: requestHeaders,
    responseType: 'text' // 必须指定，否则会默认尝试解析成JSON导致错误
  });
}

第四步：调用方法并处理响应 #

最后，调用这个方法并订阅响应（和原XHR的异步逻辑对应）：

// 假设你的XML数据是XMLData这个字符串
const xml = XMLData;

// 调用请求方法并订阅结果
this.sendXmlPutRequest(xml).subscribe(
  (responseText) => {
    // 这里拿到的responseText就是原XHR里的xhr.responseText
    console.log('请求成功，响应内容:', responseText);
    // 在这里处理你的业务逻辑
  },
  (error) => {
    console.error('请求出错:', error);
    // 错误处理逻辑，比如提示用户等
  }
);

补充说明 #

• Angular的HttpClient是基于RxJS的，所以必须订阅Observable才会真正发起请求，这和XHR的异步模式是一致的，但写法更规范。
• 如果你的XML数据是从文件或者其他地方获取的，确保它是一个合法的字符串格式再传入请求。

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