在Angular服务的constructor中调用HTTP endpoints是否可行？

Hey there! Let's break down why using ngOnInit to call methods like getHeroes() is the right move, instead of putting that logic in your component's constructor.

First, let's get straight on what each is designed for:

• Constructor's job: Think of this as Angular's setup phase for dependency injection and super basic initialization. It should only handle things like assigning injected services to class properties—it shouldn't execute any real logic, especially not operations that hit remote servers (like HTTP requests for real hero data).

虽然你可以在constructor中调用getHeroes()，但这并非最佳实践。constructor应仅用于简单初始化操作，比如将constructor参数绑定到属性。constructor不应执行任何操作，尤其不应像真实数据服务那样调用发起远程服务器HTTP请求的函数。相反，你应该把这类数据获取逻辑放在组件的生命周期钩子中，ngOnInit就是最适合的那个。

• Why ngOnInit is the right spot: This lifecycle hook fires after Angular has fully initialized your component—meaning all input properties are set, and the component instance is ready to go. Here's why it's perfect for getHeroes():
  • Your component is fully set up, so you won't run into issues with uninitialized inputs or properties.
  • It keeps your constructor clean and focused on its core purpose (dependency injection), making your code easier to read and maintain.
  • It's the standard place for initialization logic in Angular—other developers working on your code will immediately know where to look for this kind of setup.

Example Code Comparison #

Not Recommended (Constructor):

import { Component } from '@angular/core';
import { HeroService } from './hero.service';

@Component({
  selector: 'app-hero-list',
  templateUrl: './hero-list.component.html'
})
export class HeroListComponent {
  heroes: Hero[] = [];

  // Bad: Putting data-fetching here
  constructor(private heroService: HeroService) {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
  }
}

Recommended (ngOnInit):

import { Component, OnInit } from '@angular/core';
import { HeroService } from './hero.service';

@Component({
  selector: 'app-hero-list',
  templateUrl: './hero-list.component.html'
})
export class HeroListComponent implements OnInit {
  heroes: Hero[] = [];

  // Constructor only handles injection
  constructor(private heroService: HeroService) { }

  // Perfect place for data-fetching
  ngOnInit(): void {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroService.getHeroes().subscribe(heroes => this.heroes = heroes);
  }
}

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