TypeScript中如何避免API方法未执行完成就提前调用后续方法

apiCall() 内部的请求是异步操作，当前方法返回值为 void，且你直接在方法内发起订阅，外层逻辑无法感知请求的完成状态，所以 processAPIData() 会同步执行，出现提前触发的问题。setTimeout 属于固定延迟方案，无法适配波动的网络耗时，不建议使用。

因为你要求不能将 processAPIData() 写入 apiCall() 方法体内，以下两种方案都可以满足约束： #

方案1：调整apiCall()返回Observable，在外层控制执行时序 #

仅调整apiCall()的返回逻辑，原有内部数据处理逻辑完全保留，不侵入业务：

// 修改apiCall，返回Observable，将内部订阅移到外层
apiCall(): Observable<any> {
  return this.getAPIData().pipe(
    tap(response => {
      // 原有赋值逻辑保留
      this.dataToBeProcessed = response.data;
    })
  )
}

// 调用层调整
getData(): void {
  this.apiCall()
  .pipe(
    // *finalize 操作符可以保证无论请求成功还是失败，都会在请求完全结束后触发回调*
    finalize(() => this.processAPIData())
  )
  .subscribe()
}

方案2：给apiCall()增加完成回调参数 #

如果不允许修改apiCall()的返回值类型，可以加可选的回调参数作为异步完成的触发入口：

// 给apiCall增加可选的完成回调参数
apiCall(finishCallback?: () => void): void {
  this.getAPIData()
  .pipe(
    finalize(() => finishCallback?.())
  )
  .subscribe((response) => {
    this.dataToBeProcessed = response.data;
  })
}

// 调用层直接传入回调即可
getData(): void {
  this.apiCall(() => this.processAPIData())
}

以上两种方案都不会把processAPIData()的逻辑放入apiCall()内部，完全符合你的业务限制。

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