Renvoyer du HTML avec fetch ()

Question

J'essaie d'extraire un fichier et de le renvoyer au format HTML. Cependant, ce n'est pas aussi simple que je l'aurais imaginé.

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

Cela retourne un objet appelé ReadableByteStream. Comment puis-je l'utiliser pour récupérer le contenu du fichier HTML?

Si je modifie le contenu de /path/to/file pour qu’il s’agisse d’une chaîne JSON, remplacez ce qui précède par:

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

... il retourne le JSON correctement. Comment puis-je récupérer du code HTML?

Answer 1

Vous devez utiliser la méthode .text() au lieu de .json(). Cela convertit le flux d'octets en texte brut, qui peut être analysé par le navigateur au format HTML.

Answer 2

Vous pouvez télécharger le fichier HTML avec fetch, puis l'analyser avec l'API DomParser.

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

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

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

        console.log(doc);
    })
    .catch(function(err) {  
        console.log('Failed to fetch page: ', err);  
    });

Answer 3

CA devrait etre:

fetch('/path/to/file').then(function(response) {
    return response.text();
}).then(function(string) {
    console.log(string);
}).catch(function(err) {  
    console.log('Fetch Error', err);  
});