Angular 4中API调用传参时数据未定义问题求助

这个问题我太熟悉了——本质是异步操作的执行顺序搞的鬼！

你遇到的核心问题是HTTP请求的异步特性：当你在ngOnInit里先后写了两个http.get调用时，第二个请求会在第一个请求还没完成、还没给this.ip_Address赋值的时候就直接执行了。虽然之后第一个请求完成后控制台能打印出IP，但这时候第二个请求已经发出去了，自然拿到的是undefined。

下面给你两种靠谱的解决方案：

方案1：嵌套Subscribe（简单直接） #

把第二个请求放到第一个请求的next回调里，确保只有当第一个请求成功拿到IP后，才发起第二个请求：

ngOnInit() {
  this.http.get('https://api.ipify.org/?format=json')
    .subscribe({
      next: (data) => {
        this.ip_Address = data['ip'];
        console.log(this.ip_Address);
        // 此时IP已就绪，发起第二个请求
        this.http.get(`http://localhost:xyz/api/data/INSERT_USER_SESSION/?IP_Address=${this.ip_Address}&Time=${this.date_and_time}&state=${this.session_Begin_Status}`)
          .subscribe({
            next: (responseData) => this.res = responseData[''],
            error: (err) => console.error('第二个请求出错:', err)
          });
      },
      error: (error) => console.error('第一个请求出错:', error)
    });
}

方案2：用RxJS操作符链式调用（更优雅，推荐） #

使用RxJS的switchMap操作符，把两个请求串联起来，避免嵌套回调的“回调地狱”，这也是Angular中处理依赖请求的最佳实践：

首先要导入switchMap：

import { switchMap } from 'rxjs/operators';

然后修改ngOnInit：

ngOnInit() {
  this.http.get('https://api.ipify.org/?format=json')
    .pipe(
      switchMap((ipData) => {
        this.ip_Address = ipData['ip'];
        console.log(this.ip_Address);
        // 返回第二个请求的Observable，交给后续的subscribe处理
        return this.http.get(`http://localhost:xyz/api/data/INSERT_USER_SESSION/?IP_Address=${this.ip_Address}&Time=${this.date_and_time}&state=${this.session_Begin_Status}`);
      })
    )
    .subscribe({
      next: (responseData) => this.res = responseData[''],
      error: (err) => console.error('请求出错:', err)
    });
}

额外提示 #

• 记得始终处理错误回调，避免请求失败时没有任何提示；
• 可以给返回的数据定义TypeScript接口，让代码更类型安全（比如定义一个IpResponse接口，包含ip: string字段）。

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