Question

仅当我从HttpClient.post订阅了此可观察到的内容之后。但是，后请求被执行两次，因此两次添加相同的记录。请注意，所有调试日志语句均显示，只有来自订阅功能的成功响应被打印（并执行）两次。

  addTemplate(template) {
      console.log('In addTemplate');
      let authHeaders = new HttpHeaders();
      authHeaders = authHeaders.set('Authorization', 'Bearer ' + localStorage.getItem('id_token'));
      authHeaders = authHeaders.set('Content-Type', 'application/json');
      const httpOptions = {
        headers: authHeaders,
        observe: 'body' as 'body',
        responseType: 'json' as 'json'
      };
      console.log('^^^^^ addTemplate  Service Header  = ', httpOptions);

      this.httpClient.post<any>(this.constants.URL + 'addTemplate', JSON.stringify(template),
        {headers: authHeaders}).pipe().subscribe(
        (response) => {  console.log ('Added Template Successfully -->', response)},
        (error) => { console.error('Got an Error while adding Template ->', error) }
      );
   }

上面的函数是从这里调用的：

 saveTemplate(){
      const saveTemplate : ITemplate = Object.assign({}, this.templateForm.value);
      console.log('Adding new Template with name -->', saveTemplate.name);
      this.templateService.addTemplate(saveTemplate);
  }

这是浏览器控制台的图像：

以下是浏览器的“网络”标签中的图片：

如您所见，对addTemplate REST API的HttpClient.post调用被调用了两次。即使发帖仅被订阅一次，也没有其他地方被调用。通话记录

  console.log('^^^^^ addTemplate  Service Header  = ', httpOptions);

服务中的addTemplate函数中的

执行一次，但log（response）=> {console.log（“成功添加模板--”，响应）}}执行两次。

我确实尝试将对httpClient.post的调用更改为使用share（）和publishLast（）。refCount（），但是没有任何效果。也许我做错了。

将Angular 7.2与rxjs 6.5.2和rxjs / compat一起使用（是的，我确实有一些旧版代码需要升级到最新版本）

Answer 1

这是我的错误。表单正在调用saveTemplate（）以及按钮...因此被调用了两次。

<form [formGroup]="templateForm" autocomplete="off" novalidate (ngSubmit)="saveTemplate()">

按钮：

          <button mat-button mat-raised-button color="primary"
              type="submit" (click)="saveTemplate()" [disabled]="templateForm.pristine">Save

感谢@ CaptainFindus，@ Alexander Staroselsky和所有人的帮助

在Angular 7中，即使只订阅一次，为什么HttpClient.post也会执行两次？

1 个答案: