Angular 5中HttpClient.put执行两次请求的问题求助

看起来你遇到了Angular 5 PWA里PUT请求莫名重复的问题，POST和GET都正常，而且原生XMLHttpRequest测试没问题，这大概率是Angular HttpClient或者PWA Service Worker的配置问题。我来帮你梳理几种常见的原因和解决办法：

1. 优先排查Service Worker缓存策略冲突 #

这是PWA场景下最常见的诱因——Service Worker可能会对PUT这类写操作请求进行不必要的拦截或重试。

• 快速验证：临时关闭Service Worker，打开src/environments/environment.ts，把serviceWorker改成false，重启项目测试PUT请求。如果不再重复，就确认是Service Worker的问题。
• 修复方案：检查ngsw-config.json的配置，确保PUT请求被排除在缓存逻辑之外。比如为API请求配置正确的dataGroups策略：

{
  "name": "api-requests",
  "urls": ["/your-api-path/**"],
  "cacheConfig": {
    "strategy": "freshness",
    "maxSize": 100,
    "maxAge": "1d",
    "timeout": "3s"
  }
}

注意：Service Worker默认不会缓存PUT/POST/DELETE这类非GET请求，但如果你的配置用了过于宽泛的通配符（比如/**），可能会误拦截写操作请求。

2. 检查Observable是否被重复订阅 #

虽然你说PUT方法只调用了一次，但如果返回的Observable被多次订阅（比如模板里用了多个async管道，或者代码里多次调用subscribe()），就会触发多次请求。

• 排查技巧：给每个请求加个唯一标识日志，确认订阅次数：

put(url: string, data: string): Observable<any> {
  const reqId = Math.random().toString(36).slice(2);
  console.log(`PUT请求发起: ${reqId}`);
  const options = {
    headers: new HttpHeaders({ 'Content-Type': 'text/xml' })
  };
  return this.http.put(url, data, options).pipe(
    tap(() => console.log(`PUT请求响应: ${reqId}`))
  );
}

然后在订阅这个方法的地方也打日志，如果同一个reqId对应多个响应日志，就说明存在重复订阅，需要找到重复的地方优化（比如用shareReplay()来共享Observable，或者合并重复的async管道）。

3. 排查自定义HTTP拦截器 #

如果你的项目里加了自定义HTTP拦截器，检查拦截器代码有没有错误地重新发起请求。比如是否在处理逻辑里多次调用了next.handle(request)。

• 快速验证：临时移除所有拦截器，测试PUT请求是否正常。如果恢复正常，就逐个排查拦截器的代码逻辑。

4. 调整HttpClient请求配置 #

极少数情况下，HttpClient对text/xml这类Content-Type的请求处理可能有隐式异常，可以尝试调整请求配置：

put(url: string, data: string): Observable<any> {
  console.log('put');
  const headers = new HttpHeaders().set('Content-Type', 'text/xml');
  return this.http.put(url, data, {
    headers: headers,
    observe: 'body' // 显式指定观察body
  }).pipe(
    tap(() => console.log('put_output'))
  );
}

（注：Angular 5用的是RxJS 5，pipe是RxJS 6+的写法，如果你的项目还在用RxJS 5，换回map也可以，这里用tap只是为了避免不必要的映射操作）

另外，你提到原生XHR测试正常，说明后端接口本身没有问题，问题肯定出在Angular或PWA的层面，按照上面的步骤排查应该能解决。

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