Angular中HttpClient请求Pipe执行两次且catchError报错求助

使用Angular的HttpClient结合pipe/map获取服务器返回的非数组JSON数据时，遇到两个异常：

1. pipe逻辑执行两次，第一次返回空JSON，第二次才拿到服务器返回的正确数据
2. catchError抛出「未知错误」，但服务器实际返回了有效JSON

相关代码如下：

服务代码 #

export class DbstoreService {
  private apiURL: string;
  
  constructor(private http: HttpClient) { 
       this.apiURL = environment.proxyPath;
  }

  getInfo()  {
     return this.http.get(`${this.apiURL}api/getInfo/5`)
     .pipe(
        map(response => response),
       catchError(this.handleError)
    )
    }
    private handleError(error: Response) {
    console.error('handle Error: ' + error.toString());
    return throwError(() => error.toString() || 'Server error');
     }
}

组件代码 #

export class AppComponent implements OnInit{
... 
  constructor(
    private dbstoreService: DbstoreService
    )
  {
  }

  async getInfo()
  {
     await this.dbstoreService.getAgencyInfo().subscribe((data) => {});
         //  this.info.name = a.name;
 //  });
  }
}

服务器代码（C#） #

public IHttpActionResult Get(int id)
      {
     ...
        return Json(new { name = "testertester" });
      }
  }

• 修复方法名拼写错误：服务中定义的方法是getInfo()，但组件里调用的是getAgencyInfo()，这会直接触发「方法不存在」的错误，需将组件调用改为this.dbstoreService.getInfo()。
• 修正async/await与subscribe混用问题：async/await针对Promise设计，而HttpClient返回的是Observable，不能直接混用。二选一即可：
  • 改用Promise方式（配合firstValueFrom）：

    async getInfo() {
      try {
        const data = await firstValueFrom(this.dbstoreService.getInfo());
        // 处理数据：this.info.name = data.name;
      } catch (err) {
        console.error(err);
      }
    }
    

  • 直接使用Observable订阅：

    getInfo() {
      this.dbstoreService.getInfo().subscribe({
        next: (data) => {
          // 处理数据：this.info.name = data.name;
        },
        error: (err) => {
          console.error(err);
        }
      });
    }
    

• 修复错误处理的上下文丢失：catchError(this.handleError)会导致handleError方法丢失this上下文，无法正确执行。修改为箭头函数绑定上下文：

  getInfo() {
    return this.http.get(`${this.apiURL}api/getInfo/5`)
      .pipe(
        catchError((error) => this.handleError(error))
      );
  }
  

• 删除冗余map操作：map(response => response)无实际作用，HttpClient会自动解析JSON响应，直接删除即可。
• 排查重复请求原因：若请求仍执行两次，需检查：
  • 组件的getInfo方法是否被多次触发（比如同时在ngOnInit和模板事件中调用）
  • 跨域场景下服务器是否正确处理OPTIONS预请求（浏览器会先发OPTIONS请求验证权限，若处理不当会导致异常重复请求）

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