Http Requests

Photo by Paul Hanaoka on Unsplash

Angular project မှာ Http request တွေ ပြုလုပ်ချင်တယ်ဆိုရင် HttpClient ကိုအသုံးပြုပြီး ရေးသားနိုင်ပါတယ်။

အရင်ဦးဆုံး request တွေမရေးခင် AppModule ထဲမှာ HttpClientModule ကို import လုပ်ပေးဖို့ လိုအပ်ပါတယ်။

import { HttpClientModule } from '@angular/common/http';
@NgModule({
...
imports: [..., HttpClientModule],
})
export class AppModule {}

GET

Data တွေ တောင်းယူနိုင်ဖို့အတွက် Get request ကိုအသုံးပြုနိုင်ပါတယ်။ အရင်ဆုံး ShopService ကို generate လုပ်ပါ။ ပြီးရင် အောက်ပါအတိုင်းရေးပါ။

စမ်းသပ်ခေါ်ယူမဲ့ API တွေက Fake Store API ကနေ အသုံးပြုထားတာ ဖြစ်ပါတယ်။

export class ShopService {
  constructor(private httpClient: HttpClient) {}
getProducts(): Observable<any> {
    const url = 'https://fakestoreapi.com/products';
    const headers = new HttpHeaders({
      myData: 'Something',
    });
    const params = new HttpParams().set('limit', 5);
    return this.httpClient.get<any>(url, { headers, params });
}

Request တွေခေါ်ယူဖို့ HttpClient ကို inject လုပ်ထားပါတယ်။ get() နဲ့ GET request ပြုလုပ်နိုင်ပါတယ်။

get() ရဲ့ first param မှာ URL ကိုထည့်နိုင်ပြီး၊ second param မှာတော့ options တွေထည့်ပေးနိုင်ပါတယ်။

GET request တစ်ခုမှာအနည်းဆုံး URL ပါရင် ရပြီဖြစ်ပါတယ်။ အကယ်၍ return type သတ်မှတ်ချင်ရင်လည်း သတ်မှတ်နိုင်ပါတယ်။ နမူနာမှာတော့ get<any>() လို့သတ်မှတ်ထားပါတယ်။

Headers တွေသတ်မှတ်ချင်ရင် HttpHeaders နဲ့ သတ်မှတ်နိုင်ပါတယ်။ HttpHeaders သည် “Content-Type”: “application/json” ကို default အဖြစ် ထည့်ပေးပြီးသား ဖြစ်ပါတယ်။

Query params တွေထည့်ချင်ရင် HttpParams နဲ့ထည့်နိုင်ပါတယ်။

ဆက်လက်ပြီး AppComponent မှာအခုလိုရေးပါ။

getProducts() {
    this.shopService.getProducts().subscribe((data) => {
      console.log(data);
    });
  }
ngOnInit() {
    this.getProducts();
}

သတိပြုရန်မှာ HttpClient ကို subscribe လုပ်ပြီးသုံးရင် unsubscribe လုပ်ပေးစရာ မလိုပါ။ Angular က အလိုလျောက် လုပ်ပေးလို့ ဖြစ်ပါတယ်။

စမ်းကြည့်ရင်တော့ အခုလိုရလာမှာဖြစ်ပါတယ်။ Network tab မှာလည်း request ကိုလေ့လာနိုင်ပါတယ်။

data from Fake Store API

ဒီနည်းနဲ့ GET request ကိုပြုလုပ်နိုင်မှာဖြစ်ပါတယ်။

POST

Get ကိုသိရင် post ကိုအသုံးပြုရတာ လွယ်ကူစေမှာ ဖြစ်ပါတယ်။ ShopService မှာ method တစ်ခု ထပ်ရေးပါ။

addProduct(data: any): Observable<any> {
    const url = 'https://fakestoreapi.com/products';
    return this.httpClient.post<any>(url, data);
}

post() method မှာတော့ body ကို second param မှာ ထည့်ပေးရပါတယ်။ Options တွေ ထပ်ထည့်ချင်ရင် third param မှာ ထည့်နိုင်ပါတယ်။

AppComponent မှာ အခုလိုထပ်ရေးပြီး စမ်းကြည့်ပါ။

addProduct() {
    let data = {
      title: 'Test product',
      price: 1300,
    };
    this.shopService.addProduct(data).subscribe((response) => {
      console.log(response);
    });
  }
ngOnInit() {
    this.addProduct();
}

PUT နဲ့ PATCH တို့ကလည်း POST နဲ့အတူတူပဲ ဖြစ်လို့ ကိုယ်တိုင် စမ်းသပ်ကြည့်ပါ။

POST — Data အသစ်တွေ ပေးပို့ဖို့သုံး။

PUT — Data အဟောင်းကို Data အသစ်နဲ့ အစားထိုးဖို့သုံး။

PATCH — Data အဟောင်းထဲက တစ်စိတ်တစ်ပိုင်းကိုပဲ ပြင်ဖို့သုံး။

(Reference: API လို-တို-ရှင်း)

DELETE

ShopService မှာအခုလိုရေးပါ။

deleteProduct(id: number): Observable<any> {
    const url = `https://fakestoreapi.com/products/${id}`;
    return this.httpClient.delete<any>(url);
}

AppComponent ကနေခေါ်သုံးပါ။

deleteProduct() {
    this.shopService.deleteProduct(1).subscribe((response) => {
      console.log(response);
    });
  }
ngOnInit() {
    this.deleteProduct();
}

ဒီလောက်ဆိုရင် Http requests တွေကို အလွယ်တကူ ခေါ်ယူ အသုံးပြုနိုင်ပြီပဲ ဖြစ်ပါတယ်။

Previous: Useful Built-in Observables

Next: Built-in Pipes