Bagaimana untuk membuat permintaan HTTP segerak dalam JavaScript?

Dalam landskap digital semasa, tindakan membuat permintaan HTTP adalah bahagian penting dalam menghantar dan menerima data antara pelanggan dan pelayan. Permintaan tak segerak telah menjadi popular kerana ia memberikan pengalaman tanpa sekatan, yang akhirnya meningkatkan keseluruhan pengalaman pengguna. Walau bagaimanapun, dalam beberapa kes, permintaan HTTP segerak mungkin terbukti perlu atau lebih baik. Dalam naratif berikut, kami akan menyelidiki algoritma untuk membuat permintaan HTTP segerak menggunakan JavaScript. Kami juga akan meneroka dua pendekatan berbeza dan penjelasan kod yang sepadan dan aplikasi praktikalnya.

Algoritma

Untuk membuat permintaan HTTP segerak dalam JavaScript, algoritma asas mesti dilaksanakan yang merangkumi peringkat seterusnya -

• Pertama, contoh menjana objek permintaan HTTP.

• Kedua, laraskan permintaan dengan menyatakan metodologi, Uniform Resource Locator (URL) dan mendayakan mod penyegerakan permintaan.

• Ketiga, hantar permintaan.

• Keempat, tunggu balasan.

• Akhir sekali, kendalikan respons dengan sewajarnya.

Kaedah

Menggunakan XMLHttpRequest

XMLHttpRequest ialah objek sedia ada dalam JavaScript yang telah digunakan sejak sekian lama. Walaupun ia telah digantikan oleh alternatif moden, ia masih melaksanakan permintaan HTTP segerak dengan sangat baik. Berikut ialah arahan tentang cara melaksanakan XMLHttpRequest -

function synchronousRequest(url) {
   const xhr = new XMLHttpRequest();
   xhr.open('GET', url, false);
   xhr.send(null);
   if (xhr.status === 200) {
      return xhr.responseText;
   } else {
      throw new Error('Request failed: ' + xhr.statusText);
   }
}

Dalam contoh ini, kami mula-mula mencipta contoh XMLHttpRequest baharu. Seterusnya, kami memanggil kaedah open() untuk mengkonfigurasi permintaan. Parameter pertama ialah kaedah HTTP (GET), parameter kedua ialah URL, dan parameter ketiga ialah nilai Boolean yang menunjukkan sama ada permintaan itu harus tak segerak (palsu untuk permintaan segerak). Akhir sekali, kami menghantar permintaan menggunakan kaedah send() dan menunggu respons. Jika status adalah 200 (OK), kami mengembalikan teks respons jika tidak, kami membuang ralat.

Contoh

Gunakan fungsi synchronousRequest yang ditakrifkan sebelum ini -

try {
   const url = 'https://api.example.com/data';
   const responseData = synchronousRequest(url);
   console.log('Response data:', responseData);
} catch (error) {
   console.error('Error:', error.message);
}

Dalam contoh ini, kami memanggil fungsi synchronousRequest menggunakan URL prototaip. Jika permintaan itu berjaya, kami akan log maklumat respons ke konsol. Walau bagaimanapun, jika ia gagal, kami log mesej ralat ke konsol.

Gunakan Get API

Fetch API ialah pengganti moden untuk XMLHttpRequest, direka bentuk untuk menjadi lebih fleksibel dan lebih mudah digunakan. Malangnya, fungsi native fetch() tidak menyokong permintaan segerak. Walau bagaimanapun, anda boleh menggunakan async/menunggu untuk mencipta gelagat seperti penyegerakan -

async function synchronousFetch(url) {
   const response = await fetch(url);
   if (response.ok) {
      const data = await response.text();
      return data;
   } else {
      throw new Error('Request failed: ' + response.statusText);
   }
}

Dalam contoh ini, kami menggunakan fungsi fetch() untuk menyediakan Promise. Kami menggunakan kata kunci tunggu untuk menjeda pelaksanaan sehingga Janji tamat sebelum meneruskan dengan baris kod berikutnya. Jika respons memuaskan, kami mendapatkan semula teks respons jika tidak, kami mencetuskan ralat.

Contoh

Gunakan fungsi synchronousFetch yang ditakrifkan sebelum ini -

import React, { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
   const [responseData, setResponseData] = useState(null);
   useEffect(() => {
      (async () => {
         try {
            const url = "https://jsonplaceholder.typicode.com/todos/1";
            const response = await fetch(url);
            if (!response.ok) {
               throw new Error(`HTTP error! Status: ${response.status}`);
            }
            const data = await response.json();
            setResponseData(data);
         } catch (error) {
            console.error("Error:", error.message);
         }
      })();
   }, []);
   return (
      <div className="App">
         <h1>API Data</h1>
         {responseData ? (
            <pre>{JSON.stringify(responseData, null, 2)}</pre>
         ) : (
            <p>Loading...</p>
         )}
      </div>
   );
}

Output

API Data
{
   "userId": 1,
   "id": 1,
   "title": "delectus aut autem",
   "completed": false
}

Dalam contoh ini, kami memanggil fungsi synchronousFetch dalam fungsi tak segerak untuk mengendalikan kata kunci tunggu dengan betul. Seperti dalam contoh sebelumnya, kami log data tindak balas ke konsol jika permintaan itu berjaya, jika tidak mesej ralat direkodkan.

Kesimpulan

Walaupun permintaan tak segerak sering diutamakan kerana sifat tidak menyekatnya, permintaan HTTP segerak dalam JavaScript masih mempunyai kes penggunaannya. Kami membincangkan algoritma untuk membuat permintaan HTTP segerak dan meneroka dua pendekatan berbeza, termasuk kaedah XMLHttpRequest yang lebih lama dan API Ambil yang lebih moden dengan async/menunggu. Perlu diingat bahawa permintaan segerak harus digunakan dengan berhati-hati, kerana ia boleh menyekat pelaksanaan kod JavaScript dan memberi kesan negatif kepada pengalaman pengguna.

Atas ialah kandungan terperinci Bagaimana untuk membuat permintaan HTTP segerak dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!