Website-Suche

javascript - HTML mit fetch() zurückgeben

Ich versuche, eine Datei abzurufen und ihr HTML mit der Fetch-API zurückzugeben. Allerdings ist es nicht so einfach, wie ich es mir vorgestellt habe.

fetch('/path/to/file')
.then(function (response) {
    return response.body;
})
.then(function (body) {
    console.log(body);
});

Dies gibt ein Objekt namens ReadableByteStream zurück. Wie verwende ich dies, um den Inhalt der HTML-Datei zu erhalten?

Wenn ich den Inhalt von /path/to/file in einen JSON-String ändere und das Obige ändere zu:

fetch('/path/to/file')
.then(function (response) {
    return response.json();
})
.then(function (json) {
    console.log(json);
});

Es gibt das JSON korrekt zurück. Wie hole ich HTML ab?

Antwort #1

Sie können das HTML mit fetch() herunterladen und dann mit der DOMParser-API parsen.

fetch('somePage.html')
  .then(response => {
    // When the page is loaded convert it to text
    return response.text()
  })
  .then(html => {
    // Initialize the DOM parser
    const parser = new DOMParser()

    // Parse the text
    const doc = parser.parseFromString(html, "text/html")

    // You can now even select part of that html as you would in the regular DOM
    // Example:
    // const docArticle = doc.querySelector('article').innerHTML

    console.log(doc)
  })
  .catch(error => {
     console.error('Failed to fetch page: ', error)
  })

Antwort #2

Sie müssen die Methode .text() anstelle von .json() verwenden. Dies wandelt den Bytestrom in reinen Text um, der vom Browser als HTML geparst werden kann.

Antwort #3

Sie können die Antwort mit .text() zurückgeben und dann die Seite im Dokument so rendern, wie Sie möchten.

function fetchHtml() {
  fetch('./file.html')
  .then((response) => {
    return response.text();
  })
  .then((html) => {
    document.body.innerHTML = html     
  });
}

Antwort #4

Die Verwendung von Promise Chaining mit .then() ist eine ältere Methode, um Fetches und Antworten zu programmieren. Eine modernere Methode wäre die Verwendung von async-Funktionen und await wie folgt:

async function fetchMyDocument() {      
  try {
    let response = await fetch('/path/to/file.html'); // Gets a promise
    document.body.innerHTML = await response.text(); // Replaces body with response
  } catch (err) {
    console.log('Fetch error:' + err); // Error handling
  }
}

Und zur direkten Antwort auf die Frage, (wie bei jeder anderen Antwort) wird .text() statt .json() auf die Antwort angewendet.

Verwandte Artikel