如何在Angular的ngOnInit中通过Axios调用服务获取对象数组？

核心问题在于：this.myService.findAll()返回的是Axios异步请求生成的Promise对象，而非直接的对象数组，source.load()无法直接解析Promise获取数据，导致组件收不到结果。以下是具体修正步骤：

1. 修正Service的请求方法 #

确保Service返回解析后的Promise，提取后端返回的实际数据：

// myService.ts
import axios from 'axios';
import { Injectable } from '@angular/core';

// 推荐定义对象类型（可选，用于类型校验）
export interface YourObject {
  // 示例属性，根据实际后端返回结构调整
  id: number;
  name: string;
}

@Injectable({ providedIn: 'root' })
export class MyService {
  findAll(): Promise<YourObject[]> {
    return axios.get('http://localhost:8080/api/getAll')
      .then(response => response.data); // 提取响应体中的data字段，这才是后端返回的对象数组
  }
}

2. 在组件中异步处理数据 #

必须等待Promise完成，拿到实际数据后再调用source.load()，有两种常用实现方式：

方式一：使用async/await（代码更直观） #

将ngOnInit改为异步方法：

// 组件.ts
import { Component, OnInit } from '@angular/core';
import { MyService, YourObject } from './my.service';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent implements OnInit {
  constructor(private myService: MyService) {}

  async ngOnInit(): Promise<void> {
    try {
      const data = await this.myService.findAll();
      this.source.load(data); // 拿到实际数组后传入load方法
    } catch (error) {
      console.error('加载数据失败:', error);
      // 可添加用户提示逻辑，比如弹窗显示错误信息
    }
  }
}

方式二：使用Promise的then链式调用 #

// 组件.ts
ngOnInit(): void {
  this.myService.findAll()
    .then(data => {
      this.source.load(data);
    })
    .catch(error => {
      console.error('加载数据失败:', error);
    });
}

补充说明 #

如果你的source是AG Grid这类框架的数据源，部分场景支持直接接收Observable（Angular官方HttpClient默认返回Observable），若后续考虑切换到Angular原生的HttpClient，写法会更贴合Angular生态，但当前使用Axios的话，按上述异步处理逻辑即可解决问题。

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