Cara membuat permintaan http di javascript

'XmlHttpRequest' Dan 'mengambil()' adalah dua fungsi yang kuat dalam JavaScript yang dapat digunakan untuk melakukan panggilan ajax. XMLHTTPREQUEST (XHR) adalah teknologi warisan yang sudah ada sejak awal web. Ini memungkinkan Anda untuk membuat permintaan HTTP dari sisi klien, dan masih banyak digunakan sampai sekarang. Fungsi fetch (), sementara itu, adalah tambahan yang lebih baru untuk JavaScript yang perlahan mengambil alih sebagai cara yang lebih disukai untuk melakukan panggilan ajax. Ini menggunakan janji, jadi lebih mudah untuk menulis dan men -debug, dan juga mendukung streaming dan fitur modern lainnya.

Kedua XmlHttpRequest dan fetch () adalah alat yang bagus untuk membuat panggilan AJAX, tetapi fetch () umumnya dianggap sebagai opsi yang lebih baik untuk sebagian besar aplikasi. Jadi, jika Anda mencari cara untuk melakukan panggilan Ajax di JavaScript, coba fetch (). Kami pikir Anda akan terkejut dengan hasilnya!

Membuat permintaan http di javascript

Berikut adalah contoh penggunaan XmlHttpRequest untuk membuat sebuah MENDAPATKAN Permintaan untuk mengambil data dari API jarak jauh:

const xhr = xmlHttpRequest baru (); xhr.responseType = 'json'; xhr.onreadystatechange = () => if (xhr.ReadyState === XMLHTTPREQUEST.Selesai) konsol.log (xhr.tanggapan); xhr.buka ('get', 'https: // api.contoh.com/'); xhr.setRequestheader ('otorisasi', 'pembawa' + api_key); xhr.mengirim();

123456789101112

const xhr = new xmlhttpRequest (); xhr.responseType = 'json'; xhr.onreadystatechange = () => if (xhr.ReadyState === XMLHTTPREQUEST.Selesai) konsol.log (xhr.tanggapan); xhr.buka ('get', 'https: // api.contoh.com/'); xhr.setRequestheader ('otorisasi', 'pembawa' + api_key); xhr.mengirim();

Berikut adalah contoh penggunaan mengambil() untuk membuat sebuah MENDAPATKAN meminta untuk mengambil data dari API jarak jauh.

fetch ('https: // api.contoh.com/', headers: ' otorisasi ':' pembawa ' + api_key) .Kemudian (respons => respons.json ()) .Kemudian (data => konsol.log (data));

1234567

fetch ('https: // api.contoh.com/', headers: ' otorisasi ':' pembawa ' + api_key) .Kemudian (respons => respons.json ()) .Kemudian (data => konsol.log (data));

Kedua contohnya berasumsi bahwa Anda memiliki kunci API yang disimpan dalam variabel yang disebut API_Key.

Anda juga bisa menggunakan mengambil() untuk membuat jenis permintaan HTTP lainnya, seperti POS, MELETAKKAN, Dan MENGHAPUS, dengan meneruskan objek opsi sebagai argumen kedua. Misalnya:

fetch ('/url', Method: 'Post', body: json.Stringify (name: 'John', usia: 30,), header: 'content-type': 'application/json',,);

12345678910

fetch ('/url', Method: 'Post', body: json.Stringify (name: 'John', usia: 30,), header: 'content-type': 'application/json',,);

Perhatikan itu 'XmlHttpRequest' Dan 'mengambil()' tidak sinkron, yang berarti bahwa kode tidak akan diblokir saat permintaan sedang dibuat. Sebaliknya, respons akan diproses dalam fungsi panggilan balik atau dengan janji.