Http Client در انگولار 6 – آموزش Angular 6

  • پنجشنبه ۴ بهمن ۱۳۹۷
  • بازدید ۱,۸۵۶ نفر

تصویر angular-6-http-service_5655 Http Client در انگولار 6 – آموزش Angular 6

HttpClient در انگولار 6

HttpClient در انگولار به ما کمک می کند تا داده ها را از یک منبع خارجی دریافت/ارسال کنیم. برای استفاده از HttpClient باید ماژول مربوط به آن را اضافه کنیم. در این بخش نحوه استفاده از قابلیت انگولار را بررسی خواهیم کرد.

همانطور که در بالا گفته شد برای استفاده از HttpClient باید ابتدا ماژول مربوط به آن را به فایل app.module.ts اضافه کنید. مانند نمونه زیر:

در کد فوق ماژول HttpClientModule از @angular/common/http وارد کرده و آن را به بخش imports اضافه کرده ایم.

حال از این ماژول در فایل app.component.ts استفاده می کنیم:

در کد فوق بعد از import کردن Http در سازنده کلاس AppComponent یک متغیر private با نام http و از نوع Http تعریف کرده ایم.

به منظور دریافت داده ها باید از متد get استفاده کنیم. مانند نمونه زیر:

این متد یک URL را به عنوان پارامتر و دریافت اطلاعات می گیرد. در این مثال ما از آدرس https://jsonplaceholder.typicode.com/users برای گرفتن داده به صورت JSON استفاده کرده ایم. همانطور که در کد مثال مشاهده می کنید، عملیات subscribe بر روی داده های دریافتی انجام شده است. عملیات داده های را در کنسول log می کند.

تصویر angular-6-http-service_5655_1 Http Client در انگولار 6 – آموزش Angular 6

شما می توانید به جای نمایش داده های دریافتی در کنسول، آن ها را در مرورگر و برنامه نمایش دهید. برای این کار محتوای فایل app.component.html و app.component.ts را به صورت زیر تغییر دهید:

در فایل app.component.ts متد subscribe داده ها را به متد displaydata ارسال می کند. این متد داده های دریافتی را در متغیری به نام httpdata قرار می دهد. حال با استفاده از یک حلقه for داده های موجود را در مرورگر نمایش می دهیم.

محتوای فایل app.component.html:

اطلاعات دریافت شده از آدرسی که در بالا استفاده کرده ایم به صورت یک شیء JOSN است که در زیر مشاهده می کنید:

این شیء تعدادی پراپرتی مانند name، username، address و غیره دارد. پراپرتی address خودش شامل چند پراپرتی دیگر مانند city، zipcode، street و غیره است. ما در فایل html با استفاده از یک حلقه، نام و شهر هر فرد را چاپ می کنیم.

خروجی:

تصویر angular-6-http-service_5655_2 Http Client در انگولار 6 – آموزش Angular 6

حال یک متغیر به نام searchparam ایجاد کنید. این متغیر برای فیلتر کردن داده های دریافتی استفاده می شود. در زیر تغییرات اعمال شده در فایل app.component.ts را مشاهده می کنید:

در کد فوق ما برای متد get یک پارامتر به نام  id مشخص کرده و مقدار آن را برابر با متغیر searchparam داده ایم. همانطور که مشاهده می کنید مقدار این متغیر 2 است، بنابراین داده های دریافتی فقط شامل افرادی خواهد بود که id آن ها 2 است.

خروجی:

تصویر angular-6-http-service_5655_3 Http Client در انگولار 6 – آموزش Angular 6

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است