Paduan Pemula untuk Angular 4: HTTP

() translation by (you can also view the original English article)

Pada tutorial sebelumnya, kamu melihat bagaimana menerapkan routing pada aplikasi web Angular menggunakan routing Angular.

Pada tutorial sebelumnya, kamu melihat bagaimana menerapkan routing pada aplikasi web Angular menggunakan Angular HttpClient.

Angular HttpClient

Kamu menggunakan XMLHttpRequest(XHR) objek untuk membuat server-side API panggilan dari browser. Objek XHR memungkinkan untuk memperbarui sebagian halaman web tanpa memuat ulang keseluruhan halaman. kamu dapat mengirim dan menerima data dari server setelah halaman web dimuat.

Angular HttpClient menyediakan pembungkus untuk objek XHR sehingga memudahkan untuk membuat panggilan API dari aplikasi Angular

Dari dokumentasi resmi:

Dengan HttpClient, @angular / common / http menyediakan API sederhana untuk fungsi HTTP untuk digunakan dengan aplikasi Angular, Membangun di atas antarmuka XMLHttpRequest yang terpapar browser. Manfaat tambahan dari HttpClient meliputi dukungan uji coba, pengetikan permintaan dan respons yang kuat, dukungan pencegat respon dan tanggapan, dan penanganan kesalahan yang lebih baik melalui apis berdasarkan Observables.

Mulai

Kamu akan mulai dengan mengkloning kode sumber dari bagian pertama rangkaian tutorial.

1	git clone https://github.com/royagasthyan/AngularComponent.git

Setelah kamu memiliki kode sumber, navigasikan ke direktori proyek dan instal dependensi yang diperlukan.

1	cd AngularComponent
2	npm install

Setelah dependensi terinstal, jalankan aplikasi dengan mengetikkan perintah berikut:

ng serve

Kamu harus memiliki aplikasi yang berjalan di http: // localhost: 4200 /.

Untuk menggunakan modul HttpClient dalam aplikasi Angularmu, kamu harus mengimpornya terlebih dahulu di file app.module.ts milikmu.

Dari direktori proyek, navigasikan kesrc/app/app.module.ts. Di file app.module.ts , import HttpClientModule.

1	import {HttpClientModule} from '@angular/common/http';

Sertakan HttpClientModule di bawah bagian impor.

imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ]

Berikut adalah bagaimana file app.module.ts terlihat:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CalcComponent } from './calc/calc.component'
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    CalcComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Sekarang kamu akan dapat menggunakan HttpClientModule di aplikasi Sudut dengan mengimpornya dalam komponen Angular tertentu.

Membuat komponen Angular

Mari kita mulai dengan membuat komponen Angular. Buat folder yang disebut get-data di dalam folder src / app. Buat file bernama get-data.component.ts dan tambahkan kode berikut ini:

import { Component } from '@angular/core';

@Component({
  selector: 'get-data',
  templateUrl: 'get-data.component.html',
  styleUrls: ['get-data.component.css']
})
export class GetDataComponent {

    constructor(){
  	
	}

}

Buat file bernama get-data.component.html yang akan berfungsi sebagai file template untuk komponen get-data. Tambahkan kode berikut untuk file get-data.component.html:

1	<h3>
2	Get Data Component
3	</h3>

Impor GetDataComponent di file src / app / app.module.ts.

1	import { GetDataComponent } from './get-data/get-data.component';

Tambahkan GetDataComponent ke ngModule di app.module.ts.

  declarations: [
    AppComponent,
    CalcComponent,
    GetDataComponent
  ]

Berikut adalah bagaimana file app.module.ts yang dimodifikasi terlihat:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CalcComponent } from './calc/calc.component';
import { GetDataComponent } from './get-data/get-data.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    CalcComponent,
    GetDataComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Tambahkan pemilih komponen get-data ke file app.component.html. Begini tampilannya:

1	<div style="text-align:center">
2	<get-data></get-data>
3	</div>
4

Simpan perubahan di atas dan mulai server. kamu akan dapat melihat komponen get-data yang ditampilkan saat aplikasi dimuat.

Menggunakan Modul HttpClient Angular

Kamu akan menggunakan modul HttpClient untuk membuat panggilan API. Mari buat file terpisah untuk membuat layanan Angular untuk membuat panggilan API. Buat file bernama get-data.service.ts file. Tambahkan kode berikut ke file get-data.service.ts:

import { Injectable } from '@angular/core';

@Injectable()
export class GetDataService {

    constructor() {
        
    }

}

Impor modul HttpClient ke GetDataService di atas.

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

Inisialisasi HttpClient di konstruktor GetDataService.

1	constructor(private http: HttpClient) {
2
3	}

Buat metode yang disebut call_api untuk membuat panggilan API GET di file GetDataService. Kamu akan menggunakan kata sinonim finder API untuk membuat panggilan API. Beginilah cara metode call_api terlihat:

1	call_api(term) {
2	return this.http.get(this.url + term);
3	}

Berikut adalah bagaimana file get-data.service.ts terlihat:

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

@Injectable()
export class GetDataService {

    url: string
    constructor(private http: HttpClient) {
        this.url = 'https://api.datamuse.com/words?ml='
    }

    call_api(term) {
        return this.http.get(this.url + term);
    }
}

Seperti yang terlihat di kelas GetDataService di atas, metode call_api mengembalikan sebuah pengamatan yang dapat kamu gunakan dari GetDataComponent.

Untuk berlangganan dari konstruktor GetDataComponent, kamu perlu mengimpor GetDataService di GetDataComponent.

1	import { GetDataService } from './get-data.service';

Tentukan GetDataService sebagai penyedia GetDataComponent.

@Component({
  selector: 'get-data',
  templateUrl: 'get-data.component.html',
  styleUrls: ['get-data.component.css'],
  providers:[ GetDataService ]
})

Mari berlangganan dari metode konstruktor GetDataComponent.

constructor(private dataService: GetDataService){
	this.dataService.call_api('hello').subscribe(response => {
		console.log('Response is ', response);
	})
}

Berikut adalah bagaimana file get-data.component.ts terlihat:

import { Component } from '@angular/core';
import { GetDataService } from './get-data.service';

@Component({
  selector: 'get-data',
  templateUrl: 'get-data.component.html',
  styleUrls: ['get-data.component.css'],
  providers:[ GetDataService ]
})
export class GetDataComponent {

    constructor(private dataService: GetDataService){
		this.dataService.call_api('hello').subscribe(response => {
			console.log('Response is ', response);
		})
	}

}

Simpan perubahan di atas dan restart server. Kamu akan bisa melihat hasilnya masuk konsol browser.

Pada kode di atas, Kamu melihat bagaimana membuat permintaan API GET menggunakan HttpClient Angular.

Untuk membuat permintaan POST, Kamu perlu menggunakan metode http.post.

1	this.http.post(url, {key : value});

Seperti yang terlihat pada kode di atas, Kamu perlu memberikan URL posting API dan data yang akan diposkan sebagai parameter kedua.

Menangani Kesalahan Saat Membuat Panggilan API

Kapan pun kamu membuat panggilan API, ada kemungkinan yang sama untuk menemukan kesalahan. Untuk menangani kesalahan saat membuat panggilan API, kamu perlu menambahkan penangan kesalahan ke metode subscribe (berlangganan) bersama dengan penangan respone(tanggapan).

Berikut adalah bagaimana kode yang dimodifikasi dari GetDataComponent terlihat:

constructor(private dataService: GetDataService){
	this.dataService.call_api('hello').subscribe(response => {
		console.log('Response is ', response);
	}, err => {
		console.log('Something went wrong ', err);
	})
}

Ubah variabel url di file get-data.service.ts untuk membuat URL yang tidak ada yang akan menyebabkan kesalahan saat membuat panggilan API.

1	this.url = 'https://ai.datamuse.com/words?ml='

Simpan perubahan di atas dan restart server. Periksa konsol browser dan kamu akan memiliki metode penanganan kesalahan yang disebut dan kesalahan masuk.

Objek kesalahan berisi semua rincian tentang kesalahan seperti kode kesalahan, pesan kesalahan, dll. Hal ini memberi wawasan lebih dalam tentang kesalahan yang terjadi pada panggilan API. Berikut adalah bagaimana log browser konsol terlihat:

Seperti yang terlihat di log konsol di atas, semua rincian kesalahan dapat diperoleh dari objek kesalahan.

Membungkusnya

Dalam tutorial ini, Kamu melihat bagaimana memanfaatkan HttpClientModule sudut untuk membuat panggilan API. Kamu belajar bagaimana mengimpor HttpClientModule untuk membuat permintaan GET dan POST ke server API. Kamu melihat bagaimana menangani kesalahan saat membuat panggilan API.

Bagaimana pengalaman kamu mencoba belajar bagaimana membuat panggilan API menggunakan Angular HttpClientModule? Beri tahu kami pendapat kamu di komentar di bawah ini.

Source code(sumber kode) dari tutorial ini tersedia di GitHub.