Angular中Get请求未执行：无报错但无请求发送

项目场景 #

我正在开发一个小项目，通过HTTP请求实现前后端数据交互。后端是Spring应用，接口http://localhost:8080/api/grid/generate?size=4（暂为硬编码）可返回彩色网格数据，且已确认后端能正常返回数据，返回内容如下：

{
  "grid": [
    [
      {
        "color": "#9a8ca3",
        "gridPosition": [0, 0]
      },
      {
        "color": "#6382f1",
        "gridPosition": [0, 1]
      },
      {
        "color": "#9f4f77",
        "gridPosition": [0, 2]
      },
      {
        "color": "#6382f1",
        "gridPosition": [0, 3]
      }
    ],
    [
      {
        "color": "#0632ea",
        "gridPosition": [1, 0]
      },
      {
        "color": "#9a8ca3",
        "gridPosition": [1, 1]
      },
      {
        "color": "#9f4f77",
        "gridPosition": [1, 2]
      },
      {
        "color": "#5e6c0f",
        "gridPosition": [1, 3]
      }
    ],
    [
      {
        "color": "#9a8ca3",
        "gridPosition": [2, 0]
      },
      {
        "color": "#5e6c0f",
        "gridPosition": [2, 1]
      },
      {
        "color": "#FFFFFF",
        "gridPosition": [2, 2]
      },
      {
        "color": "#0632ea",
        "gridPosition": [2, 3]
      }
    ],
    [
      {
        "color": "#74e57b",
        "gridPosition": [3, 0]
      },
      {
        "color": "#0632ea",
        "gridPosition": [3, 1]
      },
      {
        "color": "#74e57b",
        "gridPosition": [3, 2]
      },
      {
        "color": "#74e57b",
        "gridPosition": [3, 3]
      }
    ]
  ],
  "emptyCellPosition": [2, 2]
}

Angular代码实现 #

GridService代码 #

import { Injectable } from '@angular/core';
import { CellComponent } from '../components/cell/cell.component';
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";

@Injectable({
  providedIn: 'root'
})
export class GridService {
  private readonly apiUrl = 'http://localhost:8080/api/grid';
  private constructor(private readonly http: HttpClient) {}

  // Generate grid from backend API
  public generateGrid(size: number): Observable<{ grid: CellComponent[][], emptyCellPosition: [number, number] }> {
    console.log("Url used: ",`${this.apiUrl}/generate?size=${size.toString()}` );
    return this.http.get<{ grid: CellComponent[][], emptyCellPosition: [number, number] }>(`${this.apiUrl}/generate?size=${size.toString()}`);
  }
}

网格组件代码 #

public constructor(private readonly gridService: GridService) {
}

public ngOnInit(): void {
  this.initGrid();
}

private initGrid(): void {
  this.gridService.generateGrid(this.size).subscribe({
    next: ({ grid, emptyCellPosition }) => {
      this.grid = grid;
      this.emptyCellPosition = emptyCellPosition;
      this.score = 0;
    },
    error: (err) => {
      console.error('Error generating grid:', err);
    }
  });
}

问题 #

我找不到任何错误，但页面Network面板中看不到任何GET请求发出。已检查URL正确性、尝试硬编码URL、改用any类型、确认get函数返回Observable，但都没有解决问题。请问是哪里遗漏了，还是犯了低级错误？

排查与解决方案 #

1. 确认HttpClientModule已导入 #

Angular的HttpClient必须在根模块（如AppModule）中导入HttpClientModule才能生效，否则HTTP请求不会被触发。打开app.module.ts，确保添加以下配置：

import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    // 其他导入项
    HttpClientModule
  ],
  // ...
})
export class AppModule { }

2. 检查this.size的有效值 #

如果this.size是undefined、null或非数字，拼接后的URL会出现异常（比如size=），可能导致请求无法正常发起。可以在initGrid中打印值确认：

private initGrid(): void {
  console.log('Grid size:', this.size); // 验证size是否为有效数字
  this.gridService.generateGrid(this.size).subscribe({
    // ...
  });
}

3. 验证组件生命周期是否触发 #

确保网格组件已被正确加载到页面，ngOnInit钩子正常执行。可以添加日志确认：

public ngOnInit(): void {
  console.log('Grid component ngOnInit executed');
  this.initGrid();
}

4. 修正类型定义错误 #

你将返回的grid类型定义为CellComponent[][]，但后端返回的是纯数据对象（仅包含color和gridPosition），并非Angular组件实例。虽然这不会直接导致请求不发送，但可能引发后续解析错误，建议改用正确的数据接口：

// 定义数据结构接口
interface CellData {
  color: string;
  gridPosition: [number, number];
}

// 修改服务中的返回类型
public generateGrid(size: number): Observable<{ grid: CellData[][], emptyCellPosition: [number, number] }> {
  return this.http.get<{ grid: CellData[][], emptyCellPosition: [number, number] }>(`${this.apiUrl}/generate?size=${size}`);
}

5. 检查订阅是否被意外取消 #

如果组件提前销毁或存在路由跳转等操作，可能导致订阅被取消，从而看不到请求。可以保存订阅对象并在销毁时取消：

import { Subscription } from 'rxjs';

private gridSubscription?: Subscription;

private initGrid(): void {
  this.gridSubscription = this.gridService.generateGrid(this.size).subscribe({
    // ...
  });
}

ngOnDestroy(): void {
  this.gridSubscription?.unsubscribe();
}

内容的提问来源于stack exchange，提问作者Thomas Le Dret