fetch, Promise, async/await

Beispiel HTTP Request mit JavaScript:

❮❯JavaScriptasync function requestTextWithGET(url) {
  const response = await fetch(url);
  console.log('Response', response); // komplettes Response Objekt
  const text = await response.text();
  console.log(text); // Text aus Response Body
}

requestTextWithGET('https://uhahne.github.io/GIS/test.txt');
console.log('Zwischenzeitlich weiter arbeiten...');

Fetch API

• wird von den meisten Browsern unterstützt
• fetch Methode: fetch(RequestInfo, RequestInit)
  • RequestInfo: URL als String, oder Request Objekt
  • RequestInit: optional; weitere Request Informationen wie method, header, body
    • Bsp: fetch(URL, {method: 'post', body: '{"plz":78120}'})
• gibt ein Promise Objekt zurück, um auf Ergebnis zu warten und als Ergebnis ein Response Objekt

Promise (Versprechen)

• Objekt, dass ein asynchrones Ereignis verwaltet
• Promise kann folgenden Zustand haben:
  • pending: schwebend, ist noch in Bearbeitung
  • fulfilled: erfüllt, also erfolgreich abgeschlossen
  • rejected: zurück gewiesen, also mit Fehler abgebrochen

async/await

• await vor einem Promise Objekt lässt den Code stoppen, bis die Promise fulfilled ist
• await kann nur in einer async function verwendet werden (nur diese stoppt; führt zwischenzeitlich anderen Code aus)
• async function gibt immer ein Promise Objekt zurück (um auf ihr Ende + ggf. Rückgabewert warten zu können)
• Alternative zu then Methode von Promise; leichter lesbar / verständlicher

Promise ohne async/await:

• mit .then(handleSuccess) Methode angeben, die bei fulfilled mit dem Response aufgerufen wird
• Fehler können mit einer zweiten Methode in .then, oder mit der .catch() Methode behandelt werden
• mit Promise.all() kann auf mehrere Promises gewartet werden
• .then gibt selbst wieder Promise zurück und kann so verkettet werden
• weitere Informationen

❮❯JavaScriptfunction requestTextWithGET(url) {
    const promise = fetch(url);
    promise.then(fetchSucceeded).then(responseTextSucceeded);
  }
  
  function fetchSucceeded(response) {
    console.log('Response', response); // complete Response object
    return response.text();
  }
  
  function responseTextSucceeded(text) {
    console.log(text); // Text from Response body
  }
  
  requestTextWithGET('https://uhahne.github.io/GIS/test.txt');