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

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 در انگولار ۷ – آموزش انگولار ۷ اولین بار در سورس سرا - آموزش برنامه نویسی. پدیدار شد.