Angular异步请求后组件变量undefined问题求助

这是个非常典型的异步操作时序问题，我来帮你拆解清楚背后的原因：

为什么原代码里this.borrowersNonAuthorized会是undefined？ #

Angular的HTTP请求是异步执行的——当你调用getDataFromServer()时，浏览器只是向服务器发送了请求，不会等待响应返回，就直接执行后续代码了。我们来梳理原代码的执行顺序：

1. ngOnInit中调用getDataFromServer()，发起异步HTTP请求
2. 立刻执行setPagingSourceAfterDataLoad()，此时服务器还没返回数据，borrowersNonAuthorized还未被赋值，自然是undefined
3. 等待一段时间后，服务器响应返回，subscribe的next回调才会触发，此时才会给borrowersNonAuthorized和totalRecords赋值，但分页设置的代码已经执行过了，所以不会生效

修改后的代码为什么能正常工作？ #

你把setPagingSourceAfterDataLoad()移到subscribe的next回调里后，执行逻辑就变成了：

1. ngOnInit调用getDataFromServer()，发起异步请求
2. 等待服务器返回数据，subscribe的next回调触发，完成nonAuthorizedResponse、borrowersNonAuthorized、totalRecords的赋值
3. 紧接着执行setPagingSourceAfterDataLoad()，这时候borrowersNonAuthorized已经被正确赋值，分页逻辑自然能拿到有效的数据

额外提示 #

这种异步时序问题在前端开发中非常常见，不管是Angular的Observable、原生Promise还是async/await，核心原则都是：依赖异步数据的操作，必须在数据返回后再执行，不能同步调用，否则就会出现变量未定义的情况。

原问题代码片段（供参考）：

// 原ngOnInit与getDataFromServer
ngOnInit() { 
  this.getDataFromServer(); 
  this.setPagingSourceAfterDataLoad(); // 此时异步请求未完成，变量未赋值
} 

getDataFromServer(){ 
  this.nregMainPageHttpService.getBorrowListForMyActiveProfiles().subscribe( 
    data => { 
      this.nonAuthorizedResponse = data; 
      this.borrowersNonAuthorized = this.nonAuthorizedResponse.borrowers; 
      this.totalRecords = this.nonAuthorizedResponse.totalRecords; 
    }, 
    error => this.errorMessage = <any>error, 
    () => { } 
  ); 
}

修改后代码片段（供参考）：

// 修改后的ngOnInit与getDataFromServer
ngOnInit() { 
  this.getDataFromServer(); 
} 

getDataFromServer(){ 
  this.nregMainPageHttpService.getBorrowListForMyActiveProfiles().subscribe( 
    data => { 
      this.nonAuthorizedResponse = data; 
      this.borrowersNonAuthorized = this.nonAuthorizedResponse.borrowers; 
      this.totalRecords = this.nonAuthorizedResponse.totalRecords; 
      this.setPagingSourceAfterDataLoad(); // 确保数据赋值后再执行分页逻辑
    }, 
    error => this.errorMessage = <any>error, 
    () => { } 
  ); 
}

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