Berikut adalah kaedah paling popular untuk membuat permintaan HTTP dalam JavaScript

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 GETpermintaan. 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.onreadystatechangeproperti yang mengandungi pengendali acara yang akan dipanggil ketika readystatechangedacara 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 onreadystatechangepenginapan ini mempunyai dua kaedah, readyStatedan statusyang membolehkan kami memeriksa keadaan permintaan kami.

Sekiranya readyStatesama dengan 4, itu bermaksud permintaan itu sudah selesai. The readyStateharta 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 $.Ajaxyang 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 successdan erroruntuk 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 $.postkaedah adalah satu lagi cara untuk menghantar data ke pelayan. Ia memerlukan tiga parameter:, urldata yang ingin anda hantar, dan fungsi panggilan balik.

$ .getJSON

The $.getJSONkaedah hanya mendapatkan semula data yang ada di format JSON. Ia memerlukan dua parameter: fungsi urldan 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: $.ajaxkaedahnya, seperti yang dilihat dalam contoh di bawah:

ambil

fetchadalah API web kuat baru yang membolehkan anda membuat permintaan tidak segerak. Sebenarnya, fetchadalah 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 fetchteknik berfungsi.

Yang fetchfungsi mengambil masa satu parameter yang sesuai: yang endpointURL. Ia juga mempunyai parameter pilihan lain seperti contoh di bawah:

Seperti yang anda lihat, fetchmempunyai 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 GETdan POSTuntuk mengambil dan menghantar data dari pelayan.

DAPATKAN:

axiosmengambil 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].