Angular如何與后端通信

Angular與后端通信通常使用HTTP模塊進行數據交換?？梢允褂媒ㄗh的HTTP客戶端庫，如HttpClient，來發送HTTP請求到后端API，并接收響應數據。

以下是一些在Angular中與后端通信的常見方法：

1. 使用HttpClient模塊發送GET、POST、PUT、DELETE等HTTP請求到后端API。

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

constructor(private http: HttpClient) {}

// 發送GET請求
this.http.get('https://api.example.com/data').subscribe(data => {
  console.log(data);
});

// 發送POST請求
this.http.post('https://api.example.com/data', { name: 'John' }).subscribe(response => {
  console.log(response);
});

2. 使用Angular的攔截器來處理請求和響應，可以在請求發送前和響應返回后對數據進行處理。

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const authToken = 'Bearer ' + localStorage.getItem('token');
    const authReq = req.clone({ setHeaders: { Authorization: authToken } });
    return next.handle(authReq);
  }
}

3. 使用RxJS中的Observables和Subjects來處理異步數據流，可以在組件之間共享數據和狀態。

import { Observable } from 'rxjs';
import { Subject } from 'rxjs';

export class DataService {
  private dataSubject = new Subject<any>();
  data$: Observable<any> = this.dataSubject.asObservable();

  constructor(private http: HttpClient) {}

  fetchData() {
    this.http.get('https://api.example.com/data').subscribe(data => {
      this.dataSubject.next(data);
    });
  }
}

總的來說，Angular通過使用HttpClient模塊、攔截器、Observables和Subjects等技術，可以方便地與后端API進行通信，并處理請求和響應數據。