JavaScript mempunyai modul dan kaedah yang bagus untuk membuat permintaan HTTP yang dapat digunakan untuk mengirim atau menerima data dari sumber sisi pelayan. Dalam artikel ini, kita akan melihat beberapa cara popular untuk membuat permintaan HTTP dalam JavaScript.
Ajax
Ajax adalah cara tradisional untuk membuat permintaan HTTP tidak segerak. Data dapat dikirimkan menggunakan metode HTTP POST dan diterima menggunakan kaedah HTTP GET. Mari lihat dan buat GET
permintaan. Saya akan menggunakan JSONPlaceholder, REST API dalam talian percuma untuk pembangun yang mengembalikan data rawak dalam format JSON.
Untuk membuat panggilan HTTP di Ajax, anda perlu memulakan XMLHttpRequest()
kaedah baru , tentukan titik akhir URL dan kaedah HTTP (dalam hal ini GET). Akhirnya, kami menggunakan open()
kaedah untuk mengikat kaedah HTTP dan titik akhir URL bersama-sama dan memanggil send()
kaedah tersebut untuk mengaktifkan permintaan.
Kami mencatat tindak balas HTTP ke konsol dengan menggunakan XMLHTTPRequest.onreadystatechange
properti yang mengandungi pengendali acara yang akan dipanggil ketika readystatechanged
acara itu dipecat.

const Http = new XMLHttpRequest(); const url="//jsonplaceholder.typicode.com/posts"; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => { console.log(Http.responseText) }
Sekiranya anda melihat konsol penyemak imbas anda, ia akan mengembalikan Array data dalam format JSON. Tetapi bagaimana kita tahu jika permintaan itu dilakukan? Dengan kata lain, bagaimana kita dapat menangani tindak balas dengan Ajax?
Tempat onreadystatechange
penginapan ini mempunyai dua kaedah, readyState
dan status
yang membolehkan kami memeriksa keadaan permintaan kami.

Sekiranya readyState
sama dengan 4, itu bermaksud permintaan itu sudah selesai. The readyState
harta mempunyai 5 jawapan. Ketahui lebih lanjut mengenainya di sini.
Selain secara langsung membuat panggilan Ajax dengan JavaScript, ada kaedah lain yang lebih kuat untuk membuat panggilan HTTP seperti $.Ajax
yang merupakan kaedah jQuery. Saya akan membincangkannya sekarang.
kaedah jQuery
jQuery mempunyai banyak kaedah untuk menangani permintaan HTTP dengan mudah. Untuk menggunakan kaedah ini, anda perlu memasukkan pustaka jQuery dalam projek anda.
$ .ajax
jQuery Ajax adalah salah satu kaedah termudah untuk membuat panggilan HTTP.

Kaedah $ .ajax mengambil banyak parameter, beberapa di antaranya diperlukan dan yang lain menjadi pilihan. Ini mengandungi dua pilihan panggilan balik success
dan error
untuk menangani respons yang diterima.
kaedah $ .get
Kaedah $ .get digunakan untuk melaksanakan permintaan GET. Ia memerlukan dua parameter: titik akhir dan fungsi panggilan balik.

$ .pos
The $.post
kaedah adalah satu lagi cara untuk menghantar data ke pelayan. Ia memerlukan tiga parameter:, url
data yang ingin anda hantar, dan fungsi panggilan balik.

$ .getJSON
The $.getJSON
kaedah hanya mendapatkan semula data yang ada di format JSON. Ia memerlukan dua parameter: fungsi url
dan fungsi panggilan balik.

jQuery mempunyai semua kaedah ini untuk meminta atau menghantar data ke pelayan jauh. Tetapi anda sebenarnya boleh memasukkan semua kaedah ini menjadi satu: $.ajax
kaedahnya, seperti yang dilihat dalam contoh di bawah:

ambil
fetch
adalah API web kuat baru yang membolehkan anda membuat permintaan tidak segerak. Sebenarnya, fetch
adalah salah satu kaedah terbaik dan kegemaran saya untuk membuat permintaan HTTP. Ia mengembalikan "Janji" yang merupakan salah satu ciri hebat ES6.Sekiranya anda tidak biasa dengan ES6, anda boleh membacanya dalam artikel ini. Janji membolehkan kita menangani permintaan tidak segerak dengan cara yang lebih bijak. Mari lihat bagaimana fetch
teknik berfungsi.

Yang fetch
fungsi mengambil masa satu parameter yang sesuai: yang endpoint
URL. Ia juga mempunyai parameter pilihan lain seperti contoh di bawah:

Seperti yang anda lihat, fetch
mempunyai banyak kelebihan untuk membuat permintaan HTTP. Anda boleh mengetahui lebih lanjut mengenainya di sini. Selain itu, dalam pengambilan terdapat modul dan plugin lain yang membolehkan kami menghantar dan menerima permintaan ke dan dari sisi pelayan, seperti aksio.
Axios
Axios adalah perpustakaan sumber terbuka untuk membuat permintaan HTTP dan menyediakan banyak ciri hebat. Mari kita lihat bagaimana ia berfungsi.
Penggunaan:
Pertama, anda perlu memasukkan Axios. Terdapat dua cara untuk memasukkan Axios dalam projek anda.
Pertama, anda boleh menggunakan npm:
npm install axios --save
Maka anda perlu mengimportnya
import axios from 'axios'
Kedua, anda boleh memasukkan aksio menggunakan CDN.
Membuat Permintaan dengan paksi:
Dengan Axios anda boleh menggunakan GET
dan POST
untuk mengambil dan menghantar data dari pelayan.
DAPATKAN:

axios
mengambil satu parameter yang diperlukan, dan boleh juga mengambil parameter pilihan kedua. Ini mengambil beberapa data sebagai pertanyaan sederhana.
POS:

Axios mengembalikan "Janji." Sekiranya anda biasa dengan janji, anda mungkin tahu bahawa janji dapat melaksanakan banyak permintaan. Anda boleh melakukan perkara yang sama dengan aksio dan menjalankan beberapa permintaan pada masa yang sama.

Axios menyokong banyak kaedah dan pilihan lain. Anda boleh menerokainya 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].