Mendapatkan Data Melalui Menggunakan API dalam JavaScript.

Apabila membina aplikasi web, membuat permintaan HTTP adalah tugas biasa. Terdapat beberapa cara untuk melakukan ini dalam JavaScript, masing-masing mempunyai kelebihan dan kes penggunaannya sendiri. Dalam siaran ini, kami akan meneroka empat kaedah popular: fetch(), axios(), $.ajax() dan XMLHttpRequest(), dengan contoh mudah untuk setiap satu.

1. Menggunakan fetch()
Fungsi fetch() membolehkan anda meminta HTTP untuk mengambil sumber daripada rangkaian. Ia menggunakan janji, yang menjadikannya lebih mudah untuk mengendalikan operasi tak segerak.

Contoh

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

2. Menggunakan Axios()
axios() ialah klien HTTP yang popular untuk membuat permintaan daripada pelayar atau Node.jsapplications. Ia serupa dengan API fetch() terbina dalam tetapi termasuk ciri tambahan seperti pemintas permintaan dan tindak balas, JSONparsing automatik dan banyak lagi.

Contoh

axios.get('https://api.example.com/data')
  .then(response => console.log(response.data))
  .catch(error => console.error('Error:', error));

3. Menggunakan $.ajax()
Jika anda bekerja dengan jQuery, anda boleh menggunakan fungsi $.ajax() untuk membuat permintaan HTTP. Ia menyediakan antara muka yang mudah untuk membuat permintaan AJAX dan mengendalikan respons.

Contoh

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: function(data) {
    console.log(data);
  },
  error: function(error) {
    console.error('Error:', error);
  }
});

4. Menggunakan XMLHttpRequest()
Objek XMLHttpRequest menyediakan cara mudah untuk mengambil data daripada URL tanpa memuat semula halaman. Tahapnya agak rendah berbanding fetch() atau perpustakaan seperti Axios, tetapi ia masih digunakan secara meluas dalam banyak aplikasi.

Contoh

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(JSON.parse(xhr.responseText));
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('Request failed');
};
xhr.send();

Dalam contoh ini, kami mencipta XMLHttpRequest baharu, membuka permintaan GET dan mengendalikan respons dengan menyemak kod status dan menghuraikan teks respons.

Atas ialah kandungan terperinci Mendapatkan Data Melalui Menggunakan API dalam JavaScript.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!