Angular Web App调用Express API首次正常 后续请求无响应如何解决

核心问题1：Angular HttpClient Observable未正确触发请求 #

Angular的HttpClient系列方法返回的是冷Observable对象，默认不会自动执行，只有调用subscribe()订阅，或者调用.toPromise()转为Promise后才会真正发起HTTP请求。
你当前的代码直接对httpClient.get()返回的Observable使用await，不会触发请求执行，程序会一直卡在这一步等待，所以后续逻辑没有响应。你提到的首次加载请求能正常运行，是因为调用链路里对返回的Observable做了订阅操作，而delete方法里没有做对应的处理。

核心问题2：GET请求做删除操作引发浏览器缓存 #

按照HTTP规范，GET请求默认会被浏览器缓存，你两次调用同一个删除接口的GET URL时，第二次请求会被浏览器直接拦截返回缓存结果，根本不会发送到Express后端，这也是你确认后端正常但前端无响应的典型原因。删除操作建议使用标准的HTTP DELETE方法，既符合REST规范，也不会被浏览器默认缓存。

核心问题3：错误的Promise反模式写法 #

你在代码中使用await new Promise(async (resolve, reject) => {})的写法属于典型的Promise反模式：async executor函数抛出的错误无法被外层Promise捕获，会导致异常丢失，也完全没有必要手动包装这层Promise，HttpClient本身就提供了转Promise的能力。

修复代码 #

1. 修复api.service.ts中的deleteFahrzeug方法 #

// 推荐方案：改用HTTP DELETE方法 + 直接返回Promise
public deleteFahrzeug = (id: number): Promise<any> => {
  console.log(`${this.apiURL}/Fahrzeuge?fb=id&fi=${id}`);
  // Angular 12及以前版本用toPromise()
  return this.httpClient.delete(`${this.apiURL}/Fahrzeuge?fb=id&fi=${id}`).toPromise();
}

// 如果你后端暂时只能支持GET方式做删除，加禁用缓存的请求头即可
public deleteFahrzeug = (id: number): Promise<any> => {
  console.log(`${this.apiURL}/Fahrzeuge?x=delete&fb=id&fi=${id}`);
  return this.httpClient.get(`${this.apiURL}/Fahrzeuge?x=delete&fb=id&fi=${id}`, {
    headers: {
      'Cache-Control': 'no-cache',
      'Pragma': 'no-cache'
    }
  }).toPromise();
}

// Angular 13+版本toPromise已废弃，改用rxjs的firstValueFrom
import { firstValueFrom } from 'rxjs';
public deleteFahrzeug = async (id: number): Promise<any> => {
  return firstValueFrom(this.httpClient.delete(`${this.apiURL}/Fahrzeuge?fb=id&fi=${id}`));
}

2. 同步修复getAlleFahrzeuge方法的冗余逻辑 #

你当前的getAlleFahrzeuge方法返回类型Promise<Observable<Fahrzeug[]>>是错误的，把Observable包在Promise里完全没有必要，修复后代码：

public getAlleFahrzeuge = (feld?: string): Promise<Fahrzeug[]> => {
  const url = feld === undefined 
    ? `${this.apiURL}/Fahrzeuge?x=get&fe=*`
    : `${this.apiURL}/Fahrzeuge?x=get&fe=${feld}`;
  return this.httpClient.get<Fahrzeug[]>(url).toPromise();
}

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