HttpClient

如何呼叫 GET、POST、PUT、DELETE

參考資料 : https://www.baeldung.com/spring-boot-angular-web

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {ExtProduct} from '../model/ext-product';
import {Observable} from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ExtProductService {

  private productUrl: string;
  
  /*
  * 注入 HttpClient 的時候，要放在建構式中。
  * 參考資料: https://blog.miniasp.com/post/2019/01/20/Angular-HttpClient-Pitfall-and-Tricks
  * */
  constructor(private http: HttpClient) {
    this.productUrl = 'http://localhost:8080/Products';
  }

  public findAll(): Observable<ExtProduct[]> {
    /*
    * 建議不要用 <any>
    * 應該替回傳的資料建立相對應的類別
    * 這樣就不用再次 JSON.parse() 去解析回傳的內容
    * 參考資料: https://blog.miniasp.com/post/2019/01/20/Angular-HttpClient-Pitfall-and-Tricks
    * */
    return this.http.get<ExtProduct[]>(this.productUrl);
  }

  public findOne(vendorId: string): Observable<ExtProduct[]> {
    return this.http.get<ExtProduct[]>(this.productUrl + '/' + vendorId);
  }

  public save(extProduct: ExtProduct) {
    return this.http.post<ExtProduct>(this.productUrl, extProduct);
  }

  public update(extProduct: ExtProduct) {
    return this.http.put<ExtProduct>(this.productUrl, extProduct);
  }

  public delete(extProduct: ExtProduct) {
    return this.http.delete(this.productUrl + '/' + extProduct.vendorId + '/' + extProduct.serviceId + '/' + extProduct.channelId);
  }
}

但如果只呼叫這些方法，並不會真的去執行!!必須在後面接上 .subscribe() 才會真的去呼叫

在 Component 引入 Service 後，呼叫 Service 的方法，後面要接上 .subscribe() 之後就可以去做成功的處理、錯誤的處理.. 等等。 下面的程式，就是先處理，把被刪除的資料過濾掉。

  ngOnInit(): void {
    this.extProductService.findAll().subscribe(data => {
      this.products = data.filter(product => product.isDelete === false);
    });
  }