تعرف على HttpClient في Angular 4.3

السلام عليكم

في الاصدار الاحدث من Angular  رقم 4.3 تم تقديم module جديد يدعى HttpClient اتى بتطويرات وتحديثات للmodule السابق له HttpModule

إذاً مالجديد ؟

•   – لست في حاجة لتحويل ال Response ل json سيتم تحويله تلقائياً, في السابق عند طلب رابط معين والاشتراك في الرد كنا نضطر لتحويل الرد يدوياً لjson حتى نستطيع استخدامه مثال

  this.http.get('https://url.dom/tt')
  .map(res => res.json)
  .subscript(res => {
  console.log(res);
  })
  

  إذا لم نقم بتحويله قبل استخدامه في map او حتى عن الاشتراك لن نستطيع استخدامه كjson
  الان بعد استخدام HttpClient لن نستخدم هذا السطر وسيصبح مباشرة

  this.http.get('https://url.dom/tt')
  .subscripe(res=> console.log(res));
  

•  – بما ان الرد “Response” القادم اصبح بصيغة json مباشرة فبتالي يمكننا تحديد نوع له, مثلاً عند طلب تسجيل الدخول وعند نجاح الطلب فمن المتوقع ان يرجع لنا بيانات المستخدم وبدلاً من عمل bind لها يدوياً اصبح بإمكاننا العمل بهذا الشكل

  
  this.http.post<IUser>('/api/auth/login',{username,password})
  
  
  .subscribe(res=>{
  
  
  //response here will &nbsp;be IUser type
  })
  
  

  في الرد هنا سيتم تحويله لنوع IUser وهو المتوقع ويمكننا بعدها استخدامه كما نشاء

  ملاحظة: IUser انا قمت بانشاءه وهو عبارة عن Interface تحتوي على خصائص المستخدم الاساسية مثل name,email,.. وغيرها

   

كيف يمكنك البدء باستخدامه

الأمر بسيط جداً

في البداية قم باستيرادها في app.module.ts الخاص بك

 import { HttpClientModule } from '@angular/common/http'
///////
 imports: [
 .....
 HttpClientModule
 ]
 

بعد ذلك يمكنك استخدامها كما كنت تستخدم Http

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

constructor(private http: HttpClient){}

ولمعرفة المزيد عن HttpClient يمكنك زيارة التويثق الرسمي Angular