Cara Berbeza untuk Membuat Permintaan HTTP dalam JavaScript

Artikel ini meneroka pelbagai kaedah JavaScript untuk membuat permintaan HTTP, membina pengetahuan asas yang diperoleh daripada dokumentasi dan tutorial. Kami akan mengkaji beberapa pendekatan praktikal.

1. API Ambil: Kaedah JavaScript terbina dalam moden menggantikan XMLHttpRequest yang lebih lama. Ia menawarkan antara muka berasaskan Promise yang lebih bersih untuk permintaan HTTP. Fungsi teras, fetch(), mendapatkan semula sumber (seperti data pelayan).

   <code class="language-javascript">fetch (URL, options)</code>

   Secara lalai, fetch() menggunakan GET. Ia mengembalikan penyelesaian Janji kepada objek Response.

   Contoh (diadaptasi daripada MDN):

   <code class="language-javascript">async function getData() {
     const url = "https://example.org/products.json";
     try {
       const response = await fetch(url);
       if (!response.ok) {
         throw new Error(`Response status: ${response.status}`);
       }
       const json = await response.json();
       console.log(json);
     } catch (error) {
       console.error(error.message);
     }
   }</code>

   Permintaan POST: Untuk permintaan POST, nyatakan method, headers dan body dalam objek options.

   Contoh (diadaptasi daripada MDN):

   <code class="language-javascript">const response = await fetch("https://example.org/post", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
     body: JSON.stringify({ username: "example" }),
   });</code>

   Ciri API Ambil Utama: API Ambil sememangnya menyokong CORS (Perkongsian Sumber Silang Asal) dan menawarkan kawalan terperinci ke atas bukti kelayakan (kuki, data pengesahan).

2. Axios: Pustaka pihak ketiga yang popular dan mesra pengguna yang memudahkan permintaan HTTP berbanding dengan API Ambil. Ia isomorfik (berfungsi dalam kedua-dua Node.js dan penyemak imbas).

   Contoh POST (diubah suai untuk fungsi anak panah):

   <code class="language-javascript">const axios = require('axios');
   
   axios.get('/user?ID=12345')
     .then(response => console.log(response))
     .catch(error => console.log(error))
     .finally(() => {});</code>

3. jQuery.ajax: Sebahagian daripada perpustakaan jQuery, sering ditemui dalam projek warisan.

   <code class="language-javascript">$.ajax({
     url: 'https://api.example.com/data',
     method: 'GET',
     success: function(data) { console.log(data); },
     error: function(error) { console.error('Error:', error); }
   });</code>

4. WebSocket API: API JavaScript terbina dalam untuk mewujudkan saluran komunikasi dua hala yang berterusan antara pelanggan dan pelayan. Sesuai untuk aplikasi masa nyata (cth., sembang).

   Contoh (diadaptasi daripada MDN):

   <code class="language-javascript">const socket = new WebSocket("ws://localhost:8080");
   socket.addEventListener("open", (event) => { socket.send("Hello Server!"); });
   socket.addEventListener("message", (event) => { console.log("Message from server ", event.data); });</code>

Walaupun sintaks untuk permintaan HTTP berbeza-beza merentas bahasa dan rangka kerja (PHP, Next.js, dll.), memahami kaedah JavaScript teras ini menyediakan asas yang kukuh untuk menyesuaikan diri dengan konteks yang berbeza.

Atas ialah kandungan terperinci Cara Berbeza untuk Membuat Permintaan HTTP dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!