Nicos Garden

Requests

2 min read

Kommunikation mit externen Ressourcen (z. B. APIs) Abrufen oder Senden von Daten über HTTP(S).

XMLHttpRequest

  • Browser-API für HTTP-Anfragen.
  • Ermöglicht das Laden von Daten ohne Neuladen der Seite.
  • Gehört nicht direkt zur JavaScript-Sprache.
const xhr = new XMLHttpRequest();
xhr.open('GET', 'mysite.com/getjson');

XMLHttpRequest is a browser-level API that enables the client to script data transfers via JavaScript, NOT part of the JavaScript language.

GET

  • Sendet eine Anfrage zum Abrufen von Daten.
  • Parameter werden über die URL übergeben.
  • Die Antwort wird nach Abschluss der Anfrage verarbeitet.
const req = new XMLHttpRequest();
req.responseType = 'json';
req.open('GET', '/getdata?id=65');
req.onload = () => {
  console.log(xhr.response);
};
 
req.send();

POST

  • Sendet Daten an den Server.
  • Nutzdaten werden im Request-Body übertragen.
  • Wird häufig zum Erstellen oder Ändern von Daten verwendet.
const data = {
  fish: 'Salmon',
  weight: '1.5 KG',
  units: 5
};
const xhr = new XMLHttpRequest();
xhr.open('POST', '/inventory/add');
xhr.responseType = 'json';
xhr.send(JSON.stringify(data));
 
xhr.onload = () => {
  console.log(xhr.response);
};

fetch api

  • Moderne Schnittstelle für HTTP-Anfragen.
  • Arbeitet Promise-basiert.
  • Unterstützt Header, Methoden, Body und Fehlerbehandlung.
fetch(url, {
    method: 'POST',
    headers: {
      'Content-type': 'application/json',
      'apikey': apiKey
    },
    body: data
  }).then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Request failed!');
  }, networkError => {
    console.log(networkError.message)
  })
}

JSON Formatted

  • Wandelt eine Fetch-Antwort in ein JavaScript-Objekt um.
  • response.json() liest und parsed JSON-Daten.
  • Ermöglicht direkten Zugriff auf die Antwortdaten.
fetch('url-that-returns-JSON')
  .then((response) => response.json())
  .then((jsonResponse) => {
    console.log(jsonResponse);
  });

promise url parameter fetch api

  • Verarbeitet die Fetch-Antwort direkt im Promise.
  • Trennung von erfolgreicher Antwort und Fehlerfall.
  • Zeigt den rohen Response-Status oder Netzwerkfehler.
fetch('url')
.then(
  response  => {
    console.log(response);
  },
 rejection => {
    console.error(rejection.message);
);

Fetch API Function

  • Kombiniert Request-Logik und Fehlerprüfung.
  • Prüft, ob die HTTP-Antwort erfolgreich ist.
  • Verarbeitet anschließend die JSON-Antwort.
fetch('https://api-xxx.com/endpoint', {
  method: 'POST',
  body: JSON.stringify({ id: '200' })
})
  .then(
    (response) => {
      if (response.ok) {
        return response.json();
      }
      throw new Error('Request failed!');
    },
    (networkError) => {
      console.log(networkError.message);
    }
  )
  .then((jsonResponse) => {
    console.log(jsonResponse);
  });

async await syntax

  • Syntaktischer Zucker für Promises.
  • Macht asynchronen Code lesbarer und linear.
  • Fehler werden über try / catch behandelt.
const getSuggestions = async () => {
  const wordQuery = inputField.value;
  const endpoint = `${url}${queryParams}${wordQuery}`;
  try {
    const response = await fetch(endpoint, { cache: 'no-cache' });
    if (response.ok) {
      const jsonResponse = await response.json();
    }
  } catch (error) {
    console.log(error);
  }
};

Graph View