Angular中如何在service.ts调用API并解决组件数据undefined问题

核心问题 #

HTTP请求是异步操作，你在组件里调用this.DATA.ApiService()后立刻赋值this.Informations = this.DATA.Informations，这时候API请求还没完成，服务里的Informations变量还没被赋值，所以拿到的是undefined。另外你调用ApiService()时没有传入必填的info参数，会导致请求头缺失，可能直接引发请求失败。

修复步骤 #

1. 改造服务，返回Observable而非内部订阅 #

修改DataInfoService.ts，让ApiService返回HTTP请求的Observable，这样组件可以监听请求完成的时机：

// DataInfoService.ts
import { Observable, tap } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataInfoService {
  public Informations: any; // 保留这个变量用于缓存数据（可选）

  constructor(private http: HttpClient) { }

  public ApiService(info: INFO): Observable<any> {
    const headers = info.headers;
    // 返回Observable，同时用tap操作符缓存数据到服务变量
    return this.http.post<any>(APIAddress, info.postData, { headers }).pipe(
      tap(data => {
        this.Informations = data;
      })
    );
  }
}

2. 在组件中订阅Observable获取数据 #

在组件的生命周期钩子（比如ngOnInit）里调用服务方法，并在订阅回调中赋值，确保只在请求完成后获取数据：

// app.component.ts
import { OnInit } from '@angular/core';

export class AppComponent implements OnInit {
  public Informations: any;

  constructor(private DATA: DataInfoService){}

  ngOnInit() {
    // 先构造符合INFO类型的参数（必须传入，否则请求会报错）
    const requestInfo: INFO = {
      headers: /* 你的请求头配置 */,
      postData: /* 你的请求体数据 */
    };

    // 订阅Observable，请求完成后再赋值
    this.DATA.ApiService(requestInfo).subscribe(data => {
      this.Informations = data;
      // 也可以用服务缓存的变量：this.Informations = this.DATA.Informations;
    });
  }
}

3. 推荐：使用Async管道避免手动订阅 #

如果不想手动管理订阅（避免内存泄漏），可以在组件中声明Observable变量，模板中用async管道自动处理：

// app.component.ts
import { OnInit } from '@angular/core';
import { Observable } from 'rxjs';

export class AppComponent implements OnInit {
  public informations$: Observable<any>;

  constructor(private DATA: DataInfoService){}

  ngOnInit() {
    const requestInfo: INFO = {
      headers: /* 你的请求头配置 */,
      postData: /* 你的请求体数据 */
    };

    this.informations$ = this.DATA.ApiService(requestInfo);
  }
}

模板中使用：

<!-- app.component.html -->
<div *ngIf="informations$ | async as info">
  <!-- 这里可以直接使用info变量，比如 {{ info.someField }} -->
</div>

关键注意点 #

• 必须传入ApiService所需的info参数，否则请求头和请求体为空，API请求大概率失败
• 永远不要在异步操作完成前直接访问异步返回的数据，要通过订阅或async管道等待操作完成

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