Berikut cara paling populer untuk membuat permintaan HTTP di JavaScript

JavaScript memiliki modul dan metode yang bagus untuk membuat permintaan HTTP yang dapat digunakan untuk mengirim atau menerima data dari sumber daya sisi server. Pada artikel ini, kita akan melihat beberapa cara populer untuk membuat permintaan HTTP di JavaScript.

Ajax

Ajax adalah cara tradisional untuk membuat permintaan HTTP asinkron. Data dapat dikirim menggunakan metode HTTP POST dan diterima menggunakan metode HTTP GET. Mari kita lihat dan buat GETpermintaan. Saya akan menggunakan JSONPlaceholder, REST API online gratis untuk pengembang yang mengembalikan data acak dalam format JSON.

Untuk melakukan panggilan HTTP di Ajax, Anda perlu menginisialisasi XMLHttpRequest()metode baru , menentukan titik akhir URL dan metode HTTP (dalam hal ini GET). Terakhir, kami menggunakan open()metode untuk mengikat metode HTTP dan URL endpoint bersama-sama dan memanggil send()metode tersebut untuk menjalankan permintaan.

Kami mencatat respons HTTP ke konsol dengan menggunakan XMLHTTPRequest.onreadystatechangeproperti yang berisi pengendali kejadian yang akan dipanggil saat readystatechangedkejadian dipicu.

const Http = new XMLHttpRequest(); const url="//jsonplaceholder.typicode.com/posts"; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => { console.log(Http.responseText) }

Jika Anda melihat konsol browser Anda, itu akan mengembalikan Array data dalam format JSON. Tapi bagaimana kita tahu jika permintaan itu dilakukan? Dengan kata lain, bagaimana kita bisa menangani respon dengan Ajax?

The onreadystatechangeproperti memiliki dua metode, readyStatedan statusyang memungkinkan kita untuk memeriksa keadaan permintaan kami.

Jika readyStatesama dengan 4, berarti permintaan sudah selesai. The readyStateproperti memiliki 5 tanggapan. Pelajari lebih lanjut di sini.

Selain secara langsung membuat panggilan Ajax dengan JavaScript, ada metode lain yang lebih kuat untuk membuat panggilan HTTP seperti $.Ajaxmetode jQuery. Saya akan membahasnya sekarang.

metode jQuery

jQuery memiliki banyak metode untuk menangani permintaan HTTP dengan mudah. Untuk menggunakan metode ini, Anda harus menyertakan pustaka jQuery dalam proyek Anda.

$ .ajax

jQuery Ajax adalah salah satu metode paling sederhana untuk melakukan panggilan HTTP.

Metode $ .ajax mengambil banyak parameter, beberapa di antaranya diperlukan dan yang lainnya opsional. Ini berisi dua opsi panggilan balik successdan erroruntuk menangani respons yang diterima.

$ .get metode

Metode $ .get digunakan untuk menjalankan permintaan GET. Dibutuhkan dua parameter: titik akhir dan fungsi panggilan balik.

$ .post

The $.postMetode adalah cara lain untuk mengirim data ke server. Dibutuhkan tiga parameter: the url, data yang ingin Anda posting, dan fungsi callback.

$ .getJSON

The $.getJSONMetode hanya mengambil data yang ada di format JSON. Dibutuhkan dua parameter: urldan fungsi panggilan balik.

jQuery memiliki semua metode ini untuk meminta atau mengirim data ke server jarak jauh. Tetapi Anda sebenarnya dapat menempatkan semua metode ini menjadi satu: $.ajaxmetode, seperti yang terlihat pada contoh di bawah ini:

mengambil

fetchadalah API web baru yang kuat yang memungkinkan Anda membuat permintaan asinkron. Faktanya, fetchini adalah salah satu cara terbaik dan favorit saya untuk membuat permintaan HTTP. Ia mengembalikan "Janji" yang merupakan salah satu fitur hebat ES6.Jika Anda tidak terbiasa dengan ES6, Anda dapat membacanya di artikel ini. Janji memungkinkan kami menangani permintaan asinkron dengan cara yang lebih cerdas. Mari kita lihat cara fetchkerjanya secara teknis.

The fetchFungsi mengambil satu parameter yang diperlukan: the endpointURL. Ini juga memiliki parameter opsional lainnya seperti pada contoh di bawah ini:

Seperti yang Anda lihat, fetchmemiliki banyak keuntungan untuk membuat permintaan HTTP. Anda dapat mempelajarinya lebih lanjut di sini. Selain itu, di dalam fetch terdapat modul dan plugin lain yang memungkinkan kita mengirim dan menerima permintaan ke dan dari sisi server, seperti axios.

Axios

Axios adalah pustaka sumber terbuka untuk membuat permintaan HTTP dan menyediakan banyak fitur hebat. Mari kita lihat cara kerjanya.

Pemakaian:

Pertama, Anda harus memasukkan Axios. Ada dua cara untuk memasukkan Axios dalam proyek Anda.

Pertama, Anda dapat menggunakan npm:

npm install axios --save

Kemudian Anda perlu mengimpornya

import axios from 'axios'

Kedua, Anda dapat memasukkan aksios menggunakan CDN.

Membuat Permintaan dengan axios:

Dengan Axios Anda dapat menggunakan GETdan POSTmengambil serta memposting data dari server.

DAPATKAN:

axiosmengambil satu parameter wajib, dan dapat mengambil parameter opsional kedua juga. Ini mengambil beberapa data sebagai kueri sederhana.

POS:

Axios mengembalikan "Janji". Jika Anda terbiasa dengan promise, Anda mungkin tahu bahwa promise dapat menjalankan banyak permintaan. Anda dapat melakukan hal yang sama dengan axios dan menjalankan beberapa permintaan secara bersamaan.

Axios mendukung banyak metode dan opsi lain. Anda dapat menjelajahinya di sini.

Angular HttpClient

Angular has its own HTTP module that works with Angular apps. It uses the RxJS library to handle asynchronous requests and provides many options to perform the HTTP requests.

Making a call to the server using the Angular HttpClient

To make a request using the Angular HttpClient, we have to run our code inside an Angular app. So I created one. If you’re not familiar with Angular, check out my article, learn how to create your first Angular app in 20 minutes.

The first thing we need to do is to import HttpClientModule in app.module.ts

Then, we have to create a service to handle the requests. You can easily generate a service using Angular CLI.

ng g service FetchdataService

Then, we need to import HttpClient in fetchdataService.ts service and inject it inside the constructor.

And in app.component.ts import fetchdataService

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

Finally, call the service and run it.

app.component.ts:

You can check out the demo example on Stackblitz.

Wrapping Up

We’ve just covered the most popular ways to make an HTTP call request in JavaScript.

Thank you for your time. If you like it, clap up to 50, click follow, and reach out to me on Twitter.

By the way, I’ve recently worked with a strong group of software engineers for one of my mobile applications. The organization was great, and the product was delivered very quickly, much faster than other firms and freelancers I’ve worked with, and I think I can honestly recommend them for other projects out there. Shoot me an email if you want to get in touch — [email protected].