数据请求

约 112 字小于 1 分钟

2026-09-17

在 Angular 中，数据请求通常是通过 HTTP 客户端来实现的。Angular 提供了 HttpClient 模块，它是一个强大的工具，用于与后端 API 进行通信。

import { HttpClient } from '@angular/common/http'
import { Component, inject, signal } from '@angular/core'

interface AdviceSlip {
  slip: {
    id: number
    advice: string
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.html',
  styleUrls: ['./app.css'],
})
export class App {
  private http = inject(HttpClient)
  loading = signal(false)
  advice = signal<string>('')

  getAdvice() {
    this.loading.set(true)

    this.http
      .get<AdviceSlip>(`https://api.adviceslip.com/advice?${Math.random()}`)
      .subscribe((res) => {
        this.advice.set(res.slip.advice)
        this.loading.set(false)
      })
  }
}