Cara Mudah Melakukan Request HTTP di JavaScript Tutorial Website 17July
Cara Mudah Melakukan Request HTTP di JavaScript

JavaScript memiliki modul-modul yang mempermudah proses request HTTP untuk mengirim maupun menerima data dari sebuah server. Kali ini kita akan melihat beberapa teknik yang biasa dipakai dalam melakukan request HTTP di JavaScript.

Ajax

Ajax adalah cara paling tradisional yang melakukan request HTTP. Data bisa dikirim dengan menggunakan method HTTP POST dan menerima data dengan HTTP GET.

Untuk membuat HTTP call di Ajax, kita perlu membuat sebuah objek XMLHttpRequest(), menentukan URL endpoint dan HTTP method-nya. Selanjutnya kita memanggil method open() untuk membuka koneksi ke URL yang dimasukkan menggunakan HTTP method yang diinginkan. Method send()akan memulai proses koneksi yang sebelumnya sudah dibuka oleh open().

Method onreadystatechange dipanggil saat objek Http telah berhasil mendapat data yang diperlukan atau gagal. Ia memiliki dua method yaitu readyState dan status untuk memeriksa status request yang dilakukan.

const Http = new XMLHttpRequest(); const url='https://jsonplaceholder.typicode.com/posts'; Http.open("GET", url); Http.send(); Http.onreadystatechange=(e)=>{ if(this.readyState==4 && this.status== 200) { console.log(Http.responseText)	} } 

Jika readyState sama dengan 4 artinya request telah berhasil dilakukan. Ia memiliki 5 jenis respon yaitu 0 saat data belum dikirim (open() belum dipanggil), 1 saat sudah memanggil open(), 2 saat sudah memanggil send() , 3 saat operasi masih berlangsung, 4 saat operasi sudah selesai. Baca di sini.

jQuery

jQuery memiliki banyak method untuk mempermudah proses request HTTP. Untuk menggunakan method yang dibahas di sini, teman-teman harus menambahkan baris ini di halaman HTML yang dipakai.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">script> 

$.ajax

jQuery Ajax merupakan salah satu cara paling mudah untuk melakukan HTTP call.

img

Method $.ajax meminta banyak parameter, beberapa wajib (seperti url dan type) dan beberapa yang lain opsional. Ada dua callback yang akan dipanggil saat request berhasil atau gagal yaitu success dan error.

$.get

Berbeda dengan cara sebelumnya dimana kita bisa menentukan HTTP method GET atau POST, cara ini hanya melakukan GET saja.

img

$.post

Sama seperti $.get, cara ini hanya melakukan requst POST.

img

$.getJSON

Method $.getJSON hanya mengambil data dalam format JSON. Ia meminta dua parameter url dan sebuah fungsi callback untuk meng-handle hasil yang didapat.

img

Kita juga bisa menambahkan data format JSON melalui fungsi $.ajax.

fetch

fetch adalah salah satu tool yang membantu melakuan request Asynchronous dengan lebih mudah. Ia mengembalikan sebuah Promise yang merupakan salah satu fitur andalan ES6. Perhatikan bagaimana cara penggunaan fetch di bawah ini:

img

Fungsi fetch meminta sebuah parameter yaitu alamat URL endpoint. Ia juga bisa menerima parameter lain sebagai query parameter untuk URL yang diberikan.

img

Axios

Axios adalah sebuah library open source yang saat ini paling booming untuk melakukan request HTTP karena memiliki banyak kelebihan namun dengan penggunaan yang tidak lebih sulit dibanding yang lain.

Untuk menggunakan Axios, ada dua cara untuk menambahkannya ke project kita.

Pertama, menggunakan npm:

npm install axios --save 

Lalu di impor menggunakan perintah

import axios from 'axios' 

Atau menggunakan axios dari CDN seperti jQuery:

<script src="https://unpkg.com/axios/dist/axios.min.js">script> 

Kita bisa melakukan request HTTP GET maupun HTTP POST dengan Axios.

GET

img

Pemanggilan pertama hanya mengirimkan alamat URL endpoint dan pemanggilan kedua mengirimkan alamat URL disertai query parameter untuk URL tersebut.

POST

img

Perbedaan saat melakukan POSt, kita menambahkan property data untuk data yang ingin dikirim ke server.

Karena Axios menggunakan Promise, kita bisa melakukan request sekaligus.

img

Axios memiliki begitu banyak opsi untuk melakukan request HTTP. Teman-teman bisa melihat semuanya di sini.

Angular HttpClient

Angular memiliki modul HTTP khusus untuk melakukan request HTTP di aplikasi Angular. Ia memanfaatkan library RxJS untuk request asynchronous dan memiliki banyak opsi dalam melakukan request HTTP.

Untuk menggunakannya, kita harus mengimpor HttpClientModule di app.module.ts:

img

Selanjutnya kita bisa membuat sebuah service baru untuk meng-handle request. Membuat service baru bisa dilakukan dengan Angular CLI sebagai berikut:

ng g service FetchdataService 

Lalu, kita impor HttpClient di fetchdataService.ts dan meng-inject-nya di constructor.

img

Tambahkan FetchDataService di baris import:

//import  import { FetchdataService } from './fetchdata.service'; 

Terakhir, panggil service dan jalankan.

app.component.ts:

img

Perhatian di baris constructor dimana kita membuat objek srv yang tipenya FetchdataService. Objek inilah yang dipakai untuk melakukan request HTTP di dalam fungsi getPosts() dengan memanggil getData.

Teman-teman bisa melihat contoh program Angular yang berikut:

https://stackblitz.com/edit/angular-httpclinent?embed=1&file=app/app.component.ts



David Naista

David Naista

Penulis merupakan CEO & Founder CV Naistudio. Beliau sudah pernah menulis beberapa buku tentang pemrograman website. Penulis juga pernah mendapatkan beberapa mendali juara nasional dan internasional dibidang pemrograman website.