Einführung in "fetch()"

Matt Gaunt

Mit fetch() können Sie Netzwerkanfragen ähnlich wie XMLHttpRequest (XHR) stellen. Der Hauptunterschied besteht darin, dass die Fetch API Promises verwendet, die eine einfachere API haben, um die komplizierten Callbacks in der XMLHttpRequest API zu vermeiden.

Unterstützte Browser

• 42
• 14
• 39
• 10.1

Quelle

Wenn Sie Promises noch nie verwendet haben, lesen Sie den Artikel Einführung in JavaScript-Promises.

Einfache Abrufanfrage

Hier ein Beispiel, das mit XMLHttpRequest und dann mit fetch implementiert wurde. Wir möchten eine URL anfordern, eine Antwort erhalten und diese als JSON parsen.

XMLHttpRequest

Ein XMLHttpRequest benötigt zwei Listener, um den Erfolg und den Fehlerfall zu behandeln, sowie einen Aufruf von open() und send(). Beispiel aus den MDN-Dokumenten

function reqListener () {
  const data = JSON.parse(this.responseText);
  console.log(data);
}

function reqError (err) {
  console.log('Fetch Error :-S', err);
}

const oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

Abrufen

Unsere Abrufanfrage sieht so aus:

fetch('./api/some.json')
  .then(response => {
    if (response.status !== 200) {
      console.log(`Looks like there was a problem. Status Code: ${response.status}`);

      return;
    }

    // Examine the text in the response
    response.json().then(function(data) {
      console.log(data);
    });
  })
  .catch(err => {
    console.log('Fetch Error :-S', err);
  });

Für die fetch()-Anfrage ist nur ein Aufruf erforderlich, um die gleiche Arbeit wie im XHR-Beispiel zu erledigen. Zur Verarbeitung der Antwort prüfen wir zuerst, ob der Antwortstatus 200 ist, und parsen die Antwort dann als JSON. Die Antwort auf eine fetch()-Anfrage ist ein Stream-Objekt. Das bedeutet, dass nach dem Aufrufen der json()-Methode ein Promise zurückgegeben wird. Der Stream erfolgt asynchron.

Antwortmetadaten

Im vorherigen Beispiel wurde der Status des Response-Objekts und die Parse-Methode für die Antwort als JSON gezeigt. So greifen Sie auf andere Metadaten zu, auf die Sie möglicherweise zugreifen möchten, z. B. auf Header:

fetch('users.json').then(response => {
  console.log(response.headers.get('Content-Type'));
  console.log(response.headers.get('Date'));

  console.log(response.status);
  console.log(response.statusText);
  console.log(response.type);
  console.log(response.url);
});

Antworttypen

Wenn wir eine Abrufanfrage stellen, wird der Antwort eine response.type von „basic“, „cors“ oder „opaque“ zugewiesen. Mit diesen types wird angegeben, woher die Ressource stammt. Sie können sie verwenden, um zu bestimmen, wie das Antwortobjekt behandelt werden soll.

Wenn der Browser eine Ressource vom selben Ursprung anfordert, hat die Antwort den Typ basic mit Einschränkungen, was Sie in der Antwort sehen können.

Wenn eine Anfrage für eine Ressource an einem anderen Ursprung gesendet wird und dieser Ursprung CORS-Header zurückgibt, ist der Typ cors. cors-Antworten ähneln basic-Antworten, aber die zu sehenden Header sind auf Cache-Control, Content-Language, Content-Type, Expires, Last-Modified und Pragma beschränkt.

opaque-Antworten stammen von einem anderen Ursprung, der keine CORS-Header zurückgibt. Bei einer undurchsichtigen Antwort können wir die zurückgegebenen Daten nicht lesen oder den Status der Anfrage prüfen. Sie können also nicht überprüfen, ob der Antrag erfolgreich war.

Sie können einen Modus für eine Abrufanfrage definieren, damit nur bestimmte Anfragetypen aufgelöst werden. Sie können folgende Modi festlegen:

• same-origin ist nur für Anfragen nach Assets mit demselben Ursprung erfolgreich. Alle anderen Anfragen werden abgelehnt.
• cors erlaubt Anfragen für Assets mit demselben Ursprung und anderen Ursprüngen, die die entsprechenden CORS-Header zurückgeben.
• cors-with-forced-preflight führt vor jeder Anfrage eine Preflight-Prüfung durch.
• no-cors ist für Anfragen an andere Ursprünge gedacht, die keine CORS-Header haben und eine opaque-Antwort zurückgeben. Wie bereits erwähnt , ist dies derzeit nicht im globalen Gültigkeitsbereich des Fensters möglich.

Um den Modus zu definieren, fügen Sie der fetch-Anfrage als zweiten Parameter ein Optionsobjekt hinzu und definieren Sie den Modus in diesem Objekt:

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
  .then(response => response.text())
  .then(text => {
    console.log('Request successful', text);
  })
  .catch(error => {
    log('Request failed', error)
  });

Promise-Verkettung

Eine der großen Vorteile von Versprechen ist die Möglichkeit, sie zu verketten. Bei fetch() können Sie so die Logik für Abrufanfragen teilen.

Wenn Sie mit einer JSON API arbeiten, müssen Sie den Status prüfen und die JSON-Antworten parsen. Sie können Ihren Code vereinfachen, indem Sie den Status und das JSON-Parsen in separaten Funktionen definieren, die Versprechen zurückgeben, und die Abrufanfrage nur für die endgültigen Daten und den Fehlerfall verwenden.

function status (response) {
  if (response.status >= 200 && response.status < 300) {
    return Promise.resolve(response)
  } else {
    return Promise.reject(new Error(response.statusText))
  }
}

function json (response) {
  return response.json()
}

fetch('users.json')
  .then(status)
  .then(json)
  .then(data => {
    console.log('Request succeeded with JSON response', data);
  }).catch(error => {
    console.log('Request failed', error);
  });

In diesem Beispiel wird eine status-Funktion definiert, die die response.status prüft und entweder ein erfülltes Versprechen als Promise.resolve() oder ein abgelehntes Versprechen als Promise.reject() zurückgibt. Dies ist die erste Methode, die in der fetch()-Kette aufgerufen wird.

Wenn das Promise erfüllt ist, ruft das Script die json()-Methode auf, die ein zweites Promise vom response.json()-Aufruf zurückgibt und ein Objekt mit dem geparsten JSON erstellt. Wenn das Parsen fehlschlägt, wird das Promise abgelehnt und die catch-Anweisung wird ausgeführt.

Mit dieser Struktur können Sie die Logik für alle Abrufanfragen verwenden, was die Pflege, Lesbarkeit und Prüfung des Codes erleichtert.

POST-Anfrage

Manchmal muss eine Webanwendung eine API mit einer POST-Methode aufrufen und einige Parameter in den Text der Anfrage aufnehmen. Legen Sie dazu die Parameter method und body in den fetch()-Optionen fest:

fetch(url, {
    method: 'post',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'foo=bar&lorem=ipsum'
  })
  .then(json)
  .then(data => {
    console.log('Request succeeded with JSON response', data);
  })
  .catch(error => {
    console.log('Request failed', error);
  });

Anmeldedaten mit einer Abrufanfrage senden

Wenn du eine Abrufanfrage mit Anmeldedaten wie Cookies senden möchtest, setze den credentials-Wert der Anfrage auf "include":

fetch(url, {
  credentials: 'include'
})