返回带有提取()的 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？

124846 次浏览
小开
最佳答案

You need to use the .text() method, instead of .json(). This converts the byte stream into plain text, which can be parsed by the browser as HTML.

小开

You can download the html with fetch and then parse it with 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);
});

小开

It should be:

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

you can return the response with .text(), and then render the page in the doc as you want.

function fetchHtml() {
fetch('./file.html')
.then((response) => {
return response.text();
})
.then((html) => {
document.body.innerHTML = html
});
}
小开
  • 1- call function fetch and add the path of the page.
  • 2- then convert the fetch data to text by function .text().
  • 3- then append the page component to your parent container.

       async function getAbout() {




await fetch('./component/about.html').then(res => res.text()).then(data => {
page_2.innerHTML = data;


}).then(() => {
       

// after fetch write js code here
})}

  • for fetch, component don't add <body> or <HTML> tag < just use other like <div> or other tags.

  • for better performance use async-await!.

小开

Using Promise Chaining with .then() is an older way of coding fetches and responses. A more modern way would be to use ABC1 functions and await like the following:

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
}
}

And about the direct answer to the question, (like every other answer) .text() is used instead of .json() on the response.

小开

Use this:

var fetchAndParse = async (url) => { let div = document.createElement("div"); div.innerHTML = await (await fetch(url)).text(); return div }

Today I wanted to know the length of all the OpenSource licenses. I ended up running a code like this one on https://opensource.org/licenses/alphabetical (remove .slice(0, 3) to map it onto all links):

var $$ = (x) => ([...document.querySelectorAll(x)])
var fetchAndParse = async (url) => { let div = document.createElement("div"); div.innerHTML = await (await fetch(url)).text(); return div }
var waitTimeout = async (duration) => { return new Promise((accept) => setTimeout(accept, duration)) }
var licenseArray = await Promise.all($$("#main a[href]").slice(0, 3).map(async (anchor, k) => {
let text = await fetchAndParse(anchor.href).then(div => div.querySelector("#main").textContent.replace(/\s+/g, ' ').trim()).catch(error => { console.error(anchor.href, error); return '' })
return [anchor.href.replace(/^.*\//, ''), anchor.textContent.length, text.length, anchor.textContent, { href: anchor.href, text }]
}))

提交答案