Angular 中的 API 调用和生命周期方法

Posted 2023-03-13

【中文标题】Angular 中的 API 调用和生命周期方法

【英文标题】：API Calls and Lifecycle methods in Angular

【发布时间】：2020-06-20 11:01:26

【问题描述】：

我正试图围绕 Angular 及其生命周期方法展开思考。以下是我的问题的应付sn-p。我正在尝试获取已登录的用户，然后使用 user.id 对我的后端进行 API 调用。我尝试将第二个 API 调用移动到更下游的生命周期挂钩，但我反复收到错误，表明 this.user.id 未定义。当我在 ngafterviewchecked 中控制台记录用户对象时，它通过了。任何有关生命周期钩子的帮助或一般建议将不胜感激。这是在 app.component.ts 文件中运行的。我在 React 中的生命周期方法上相当幸运，但是 Angular 让我陷入了循环。

users:any;
userNouns:any;

ngOnInit()
  this.http.get('http://localhost:8000/users/1')
    .subscribe((result)=>this.user=result)


ngAfterViewChecked()
  console.log(this.user);
  this.http.get(`http://localhost:8000/nouns/$this.user.id`)
    .subscribe((result)=>this.userNouns=result)

【问题讨论】：

您可以将两个调用移至ngAfterViewChecked() 并且第一个调用应转换为promise，因此在执行后您应该进行第二个调用。或者您可以在第一次通话的 oncompleted 事件中进行通话，确保通话完成并分配用户

【参考方案1】：

ngOnInit 中的 http 请求未阻塞。当您的第一个 http 响应处于挂起状态时，组件将继续经历其生命周期阶段。

相反，使用 RxJS 运算符将第二个请求链接到第一个请求。您可以使用 switchMap 或 concatMap 将单个 observable 链接到另一个。你可以使用tap 来处理任何副作用（做事）。

users:any;
userNouns:any;

ngOnInit()
  this.http.get('http://localhost:8000/users/1').pipe(
    tap(result => this.user = result),
    concatMap(user => this.http.get(`http://localhost:8000/nouns/$this.user.id`)),
    tap(result => this.userNouns = result)
  ).subscribe(() => 
    const contents = this.userNouns.map(noun => noun.content);
    console.log(contents);
  );

【讨论】：

太棒了。太感谢了。那效果很好。我试图将 .map（高阶函数）附加到结果上，因为我假设它是一个对象数组，但是给出了一个错误，表明它是一个对象。我尝试在可观察链之后输入： this.userNouns=this.userNouns.map((ele)=>ele.content) ，但仍在 oninit 内……但似乎它甚至没有评估。我试图在使用其他方法操作之前解析信息。对最好的方法有什么建议吗？

你的意思有点像我在修改后的帖子中所做的吗？我已更改您的版本以避免覆盖 this.userNouns - 这似乎不对。