Angular中如何确保指定函数在另一函数执行完成后再调用

你遇到的执行顺序问题本质是异步HTTP请求的非阻塞特性导致的：

• postNewMember 内部直接调用了subscribe触发POST请求，但请求是后台异步执行的，不会阻塞后续代码，所以getMember会在POST请求还没得到服务端响应前就触发
• 另外postNewMember没有返回Observable对象，外部完全监听不到POST请求的完成时机

第一步：修改Service层的postNewMember方法 #

不要在Service内部订阅POST请求，改为返回Observable对象，交由调用方控制执行时机：

postNewMember(title: string, firstName: string, surName: string, telRes: string, faxNbr: string, email: string, idNbr: string) { 
  const headers = new HttpHeaders().set('Content-Type', 'application/json'); 
  const newMember = { 
    title: title, 
    firstName: firstName, 
    surName: surName, 
    telRes: telRes, 
    faxNbr: faxNbr, 
    email: email, 
    idNbr: idNbr 
  }
  // 去掉内部subscribe，直接返回Observable
  return this.http.post(this.url + '/crm/postNewMember', JSON.stringify(newMember), { headers: headers });
}

getMember方法不需要改动。

第二步：修改组件的submitForm方法，串联两个请求 #

使用RxJS的switchMap操作符，等POST请求完成拿到响应后，再触发GET请求：

import { switchMap } from 'rxjs/operators';

// ...其他代码省略

submitForm() { 
  const data = this.memberForm.value; 
  console.log(data); 
  this.service.postNewMember(data.title, data.firstname, data.surname, data.telRes, data.faxNbr, data.email, data.idNbr)
  .pipe(
    // POST请求成功后，切换到GET请求
    switchMap(postRes => {
      console.log('会员新增成功', postRes);
      return this.service.getMember(data.idNbr);
    })
  )
  .subscribe(
    (getRes: any) => { 
      console.log('会员查询成功', getRes);
      // 这里写你后续的业务逻辑
    }, 
    (err: any) => { 
      console.error('请求出错', err); 
    }
  );
}

如果你的项目是RxJS 7+版本，也可以用lastValueFrom把Observable转成Promise用async/await写法，效果是一样的：

import { lastValueFrom } from 'rxjs';

// ...其他代码省略

async submitForm() { 
  const data = this.memberForm.value; 
  console.log(data); 
  try {
    // 等待POST请求完成
    const postRes = await lastValueFrom(this.service.postNewMember(data.title, data.firstname, data.surname, data.telRes, data.faxNbr, data.email, data.idNbr));
    console.log('会员新增成功', postRes);
    // 再执行GET请求
    const getRes = await lastValueFrom(this.service.getMember(data.idNbr));
    console.log('会员查询成功', getRes);
    // 后续业务逻辑
  } catch (err) {
    console.error('请求出错', err);
  }
}

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