Angular CLI中如何等待插入函数完成后再执行列表查询？

嘿，我完全懂你现在的困扰——你在完成插入操作后立刻调用getStatuts()想刷新列表，但新插入的数据总是没出现对吧？问题出在HTTP请求是异步操作，你现在的代码里，插入请求还没完成，就已经去获取列表了，这时候后端数据库里还没新增那条数据呢！咱们来一步步把这个问题搞定：

第一步：修改服务层的insertStatut方法 #

你现在的服务里直接在insertStatut内部订阅了POST请求，这样组件没法知道插入操作什么时候完成。咱们把这个方法改成返回Observable，让组件自己来处理订阅逻辑：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { MatStatut } from './matStatut';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class MatStatutService {
  constructor(private http: HttpClient) {}

  getStatuts(): Observable<MatStatut[]>{
    return this.http.get<MatStatut[]>('http://localhost/rest/fonctions/matStatut/getAll.php');
  }

  // 修改这里：返回Observable，不在内部订阅
  insertStatut(statut: MatStatut): Observable<any> {
    return this.http.post('http://localhost/rest/fonctions/matStatut/create.php', { 
      mat_statut_libelle: statut.getLibelle()
    });
  }
}

第二步：调整组件的insertStatut方法逻辑 #

现在组件可以订阅插入请求的结果，只有当插入成功完成后，再去调用getStatuts()刷新列表，这样就能保证拿到最新的数据了：

import { Component, OnInit } from '@angular/core';
import { MatStatutService } from '../mat-statut.service';
import { MatStatut } from '../matStatut';

@Component({ 
  selector: 'app-mat-statut', 
  templateUrl: './mat-statut.component.html', 
  styleUrls: ['./mat-statut.component.css'] 
})
export class MatStatutComponent implements OnInit {
  private statuts: MatStatut[];
  private inStatut = new MatStatut;

  constructor(private service:MatStatutService) { }

  ngOnInit() {
    this.getStatuts();
  }

  public getStatuts(): void{
    this.service.getStatuts().subscribe(posts => {
      this.statuts = posts;
      console.log(this.statuts); // 把log放在回调里，才能拿到正确的数据
    });
  }

  public insertStatut():void{
    this.inStatut.setLibelle('Test');
    
    // 订阅插入请求，等待成功后再执行后续操作
    this.service.insertStatut(this.inStatut).subscribe(
      res => {
        console.log(res);
        // 插入成功后才刷新列表
        this.getStatuts();
        // 重置插入模型
        this.resetMatStatut(this.inStatut);
      },
      err => {
        console.log(err);
        // 这里可以加个用户提示，比如"插入失败，请重试"
      }
    );
  }

  public resetMatStatut(statut: MatStatut){
    statut.resetData();
  }
}

为什么之前的方法不行？ #

• Observer/Promise/async这些思路是对的，但你没把异步操作的顺序理清楚——必须等插入的POST请求完全完成（后端已经把数据写入数据库），再去发送GET请求拿列表。
• 之前直接调用getStatuts()，相当于两个HTTP请求并行发送，GET请求可能比POST请求先完成，自然拿不到新数据。

这样修改后，你就能在插入数据后稳定获取到更新后的列表啦！

内容的提问来源于stack exchange，提问作者Stéphane FADET