使用 axios 初始化 ngOnInit 中的列表

Question

我有一个组件，我想在其中加载从后端接收到的对象。

ngOnInit() {
        this.source.load(this.myService.findAll());
    }

在myService中，我使用axios从后端获取数据。可以看到数据到达前端了

public findAll(): any {
        axios.get('http://localhost:8080/api/getAll')
            .then(function (response) {
                console.log(response.data);
            })
            .catch(function (error) {
                console.log(error);
            })
    }

如何从组件调用服务，以便我收到一组对象？

Answer 1

ngOnInit 不是异步的，因此您必须以“即发即忘”的方式调用您的方法。这是使用 fetch 的答案，因为我不熟悉 axios，但它可能是类似的。

// angular component
ngOnInit() {
  (async () => {
    const data = await this.myService.findAll();
    this.source.load(data);
  })();
}

// MyService class
public async findAll(): any {
  try {
    const response = await fetch('http://localhost:8080/api/getAll');
    if(!response.ok) {
      throw new Error("failed to fetch");      
    }

    return await response.json();
  } catch (error) {
    throw new Error("failed to fetch");
  }
}