web-dev-qa-db-ja.com

fetch（）でHTMLを返す

ファイルを取得して、HTMLを返そうとしています。しかし、それは私が想像したほど単純ではありません。

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

これは、ReadableByteStreamというオブジェクトを返します。これを使用してHTMLファイルのコンテンツを取得するにはどうすればよいですか？

/path/to/fileの内容をJSON文字列に変更し、上記を次のように変更した場合：

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

... JSONを正しく返します。 HTMLを取得するにはどうすればよいですか？

javascriptfetch-api
25
ditto

.text()の代わりに.json()メソッドを使用する必要があります。これにより、バイトストリームがプレーンテキストに変換され、ブラウザでHTMLとして解析できます。

29
bronzehedwick

Fetchでhtmlをダウンロードしてから、DomParser APIで解析できます。

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);  
    });
35
Vladimir Jovanović

そのはず：

fetch('/path/to/file').then(function(response) {
    return response.text();
}).then(function(string) {
    console.log(string);
}).catch(function(err) {  
    console.log('Fetch Error', err);  
});
0
Trần Nguyên Khuyến