Http Client در انگولار ۷
HttpClient در انگولار ۷ به ما کمک می کند تا داده ها را از یک منبع خارجی دریافت/ارسال کنیم. برای استفاده از HttpClient باید ماژول مربوط به آن را اضافه کنیم. در این بخش نحوه استفاده از قابلیت HttpClient انگولار ۷ را بررسی خواهیم کرد.
همانطور که در بالا گفته شد برای استفاده از HttpClient باید ابتدا ماژول مربوط به آن را به فایل app.module.ts اضافه کنید.
مانند نمونه زیر:
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule , RoutingComponent} from './app-routing.module'; import { AppComponent } from './app.component'; import { NewCmpComponent } from './new-cmp/new-cmp.component'; import { ChangeTextDirective } from './change-text.directive'; import { SqrtPipe } from './app.sqrt'; import { MyserviceService } from './myservice.service'; import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ SqrtPipe, AppComponent, NewCmpComponent, ChangeTextDirective, RoutingComponent ], imports: [ BrowserModule, AppRoutingModule, HttpClientModule ], providers: [MyserviceService], bootstrap: [AppComponent] }) export class AppModule { }
در کد فوق ماژول HttpClientModule از @angular/common/http وارد کرده و آن را به بخش imports اضافه کرده ایم. ما برای گرفتن داده ها از سرور، از ماژول httpclient که در بالا اعلان شده است، استفاده می کنیم.
محتوای فایل myservice.service.ts:
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class MyserviceService { private finaldata = []; private apiurl = "http://jsonplaceholder.typicode.com/users"; constructor(private http: HttpClient) { } getData() { return this.http.get(this.apiurl); } }
در کد فوق ما یک متد به نام getData تعریف کرده ایم که اطلاعات را از URL مشخص شده گرفته و باز میگرداند. این متد در داخل فایل app.component.ts فراخوانی می شود.
مانند نمونه زیر:
import { Component } from '@angular/core'; import { MyserviceService } from './myservice.service'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Angular 7 Project!'; public persondata = []; constructor(private myservice: MyserviceService) {} ngOnInit() { this.myservice.getData().subscribe((data) => { this.persondata = Array.from(Object.keys(data), k=>data[k]); console.log(this.persondata); }); } }
در کد فوق متد getData که یک خروجی از نوع observable باز میگرداند، فراخوانی شده است. متدی که برای subscribe مشخص شده است، اطلاعات را میگیرد و در کنسول چاپ می کند.
خروجی برنامه در مرورگر:
شما می توانید به این اطلاعات در فایل html دسترسی داشته باشید.
مانند نمونه زیر:
<h3>Users Data</h3> <ul> <li *ngFor="let item of persondata; let i = index"< {{item.name}} </li> </ul>
خروجی:
نوشته Http Client در انگولار ۷ – آموزش انگولار ۷ اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.