Angular异步HTTP请求问题求助：学习Adam Freeman示例项目遇阻

嘿，作为刚学Angular时也踩过类似坑的开发者，我来帮你理理思路～

问题根源分析 #

你现在拿到的{fieldCount: 0, affectedRows: 1, ...}是数据库（看起来像MySQL）的操作执行结果，说明后端接口在处理saveProduct请求时，直接把数据库的执行反馈返回了，而不是你预期的保存后的Product对象。空行问题通常也和后端返回的响应格式不规范有关。

具体解决步骤 #

1. 优先调整后端接口的返回逻辑 #

这是最根本的解决方式：让后端在完成产品的插入/更新操作后，把完整的Product数据返回给前端。

• 插入场景：用数据库返回的insertId去查询刚插入的那条记录，然后把这条记录的JSON数据作为响应返回。
• 更新场景：直接把更新后的完整Product对象返回。
  这样前端就能直接拿到可以推入Products数组的对象了。

2. 临时调整前端RestDataSource的处理逻辑（如果暂时改不了后端） #

如果后端暂时没法调整，你可以在前端的RestDataSource里手动把数据库响应转换成Product对象：
假设你的saveProduct方法原本是这样的：

saveProduct(product: Product): Observable<Product> {
  return this.http.post<Product>('/api/products', product);
}

修改成这样：

saveProduct(product: Product): Observable<Product> {
  return this.http.post<any>('/api/products', product).pipe(
    map(dbResponse => {
      // 将数据库返回的insertId赋值给原product，构造出完整的保存后对象
      const savedProduct = {
        ...product,
        id: dbResponse.insertId // 如果是更新操作，这里可以直接用原product的id
      };
      return savedProduct;
    })
  );
}

这样你的Model调用这个方法后，就能拿到符合预期的Product对象了。

3. 解决空行问题 #

• 先打开浏览器的Network面板，找到saveProduct的请求，查看响应内容，确认是不是后端返回的JSON里包含多余的空行。
• 如果是后端的问题：让后端调整接口输出，确保返回的是标准的JSON格式，没有多余的空白字符。
• 如果是前端解析的问题：检查你处理响应的代码，有没有多余的字符串处理逻辑导致空行出现。

内容的提问来源于stack exchange，提问作者Дмитрий Савенков