Wie mache ich synchrone HTTP-Anfragen in JavaScript?

In der aktuellen digitalen Landschaft ist das Stellen einer HTTP-Anfrage ein wesentlicher Bestandteil der Übertragung und des Empfangs von Daten zwischen Client und Server. Asynchrone Anfragen erfreuen sich großer Beliebtheit, da sie ein nicht blockierendes Erlebnis bieten, was letztendlich das gesamte Benutzererlebnis verbessert. In manchen Fällen können sich jedoch synchrone HTTP-Anfragen als notwendig oder vorzuziehen erweisen. Im folgenden Bericht werden wir uns mit Algorithmen zum Erstellen synchroner HTTP-Anfragen mithilfe von JavaScript befassen. Wir werden auch zwei verschiedene Ansätze und die entsprechenden Codeerklärungen und praktischen Anwendungen untersuchen.

Algorithmus

Um eine synchrone HTTP-Anfrage in JavaScript zu stellen, muss ein grundlegender Algorithmus ausgeführt werden, der nachfolgende Phasen umfasst -

• Zuerst ein Beispiel für die Generierung eines HTTP-Anforderungsobjekts.

• Zweitens passen Sie die Anfrage an, indem Sie die Methodik und den Uniform Resource Locator (URL) angeben und den Anfragesynchronisierungsmodus aktivieren.

• Drittens senden Sie eine Anfrage.

• Viertens: Warten Sie auf die Antwort.

• Behandeln Sie abschließend die Antwort entsprechend.

Methode

Verwenden von XMLHttpRequest

XMLHttpRequest ist ein bereits vorhandenes Objekt in JavaScript, das schon seit geraumer Zeit verwendet wird. Obwohl es von modernen Alternativen abgelöst wurde, führt es synchrone HTTP-Anfragen immer noch sehr gut aus. Hier finden Sie Anweisungen zur Implementierung von 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);
   }
}

In diesem Beispiel erstellen wir zunächst eine neue XMLHttpRequest-Instanz. Als nächstes rufen wir die Methode open() auf, um die Anfrage zu konfigurieren. Der erste Parameter ist die HTTP-Methode (GET), der zweite Parameter ist die URL und der dritte Parameter ist ein boolescher Wert, der angibt, ob die Anfrage asynchron sein soll (falsch für synchrone Anfragen). Abschließend senden wir die Anfrage mit der send()-Methode und warten auf die Antwort. Wenn der Status 200 (OK) ist, geben wir den Antworttext zurück; andernfalls geben wir einen Fehler aus.

Beispiel

Verwenden Sie die zuvor definierte synchronousRequest-Funktion -

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

In diesem Beispiel rufen wir die synchronousRequest-Funktion mithilfe der Prototyp-URL auf. Wenn die Anfrage erfolgreich ist, protokollieren wir die Antwortinformationen in der Konsole. Wenn dies jedoch fehlschlägt, protokollieren wir eine Fehlermeldung in der Konsole.

Verwenden Sie die Get-API

Fetch API ist ein moderner Ersatz für XMLHttpRequest, der flexibler und benutzerfreundlicher ist. Leider unterstützt die native fetch()-Funktion keine synchronen Anfragen. Sie können jedoch async/await verwenden, um ein synchronisierungsähnliches Verhalten zu erzeugen -

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);
   }
}

In diesem Beispiel verwenden wir die Funktion fetch(), um Promise bereitzustellen. Wir verwenden das Schlüsselwort „await“, um die Ausführung anzuhalten, bis das Versprechen endet, bevor wir mit den nachfolgenden Codezeilen fortfahren. Wenn die Antwort zufriedenstellend ist, rufen wir den Antworttext ab, andernfalls lösen wir einen Fehler aus.

Beispiel

Verwenden Sie die zuvor definierte synchronousFetch-Funktion -

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 class="brush:php;toolbar:false">{JSON.stringify(responseData, null, 2)}

) : (

Loading...

)}

); }

Nach dem Login kopieren

Ausgabe

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

In diesem Beispiel rufen wir die Funktion synchronousFetch in der asynchronen Funktion auf, um das Schlüsselwort wait korrekt zu verarbeiten. Wie im vorherigen Beispiel protokollieren wir die Antwortdaten an der Konsole, wenn die Anfrage erfolgreich ist, andernfalls wird eine Fehlermeldung protokolliert.

Fazit

Während asynchrone Anfragen oft wegen ihrer nicht blockierenden Natur bevorzugt werden, haben synchrone HTTP-Anfragen in JavaScript immer noch ihre Anwendungsfälle. Wir haben Algorithmen zum Erstellen synchroner HTTP-Anfragen besprochen und zwei verschiedene Ansätze untersucht, darunter die ältere XMLHttpRequest-Methode und die modernere Fetch-API mit async/await. Beachten Sie, dass synchrone Anfragen mit Vorsicht verwendet werden sollten, da sie die Ausführung von JavaScript-Code blockieren und sich negativ auf das Benutzererlebnis auswirken können.

Das obige ist der detaillierte Inhalt vonWie mache ich synchrone HTTP-Anfragen in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!