Antwort: text()-Methode
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since März 2017.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die text()-Methode der Response-Schnittstelle nimmt einen Response-Stream und liest diesen vollständig aus. Sie gibt ein Promise zurück, das mit einem String erfüllt wird. Die Antwort wird immer mit UTF-8 dekodiert.
Syntax
text()
Parameter
Keine.
Rückgabewert
Ein Promise, das mit einem String erfüllt wird.
Ausnahmen
AbortErrorDOMException-
Die Anfrage wurde abgebrochen.
TypeError-
Wird aus einem der folgenden Gründe ausgelöst:
- Der Antwortkörper ist gestört oder gesperrt.
- Es gab einen Fehler beim Dekodieren des Inhalts des Körpers (zum Beispiel, weil der
Content-Encoding-Header falsch ist).
Beispiele
In unserem Beispiel für das Abrufen von Text (führen Sie fetch text live aus), haben wir ein <article>-Element und drei Links (gespeichert im myLinks-Array). Zuerst iterieren wir durch alle diese und geben jedem einen onclick-Ereignishandler, sodass die getData()-Funktion ausgeführt wird – mit dem data-page-Identifikator des Links als Argument – wenn einer der Links angeklickt wird.
Wenn getData() ausgeführt wird, erstellen wir eine neue Anfrage mit dem Request()-Konstruktor und verwenden diese, um eine bestimmte .txt-Datei abzurufen. Wenn das Abrufen erfolgreich ist, lesen wir einen String aus der Antwort mit text() und setzen dann das innerText des <article>-Elements gleich dem Textobjekt.
const myArticle = document.querySelector("article");
const myLinks = document.querySelectorAll("ul a");
for (const link of myLinks) {
link.onclick = (e) => {
e.preventDefault();
const linkData = e.target.getAttribute("data-page");
getData(linkData);
};
}
function getData(pageId) {
console.log(pageId);
const myRequest = new Request(`${pageId}.txt`);
fetch(myRequest)
.then((response) => {
if (!response.ok) {
throw new Error(`HTTP error, status = ${response.status}`);
}
return response.text();
})
.then((text) => {
myArticle.innerText = text;
})
.catch((error) => {
myArticle.innerText = `Error: ${error.message}`;
});
}
Spezifikationen
| Specification |
|---|
| Fetch # ref-for-dom-body-text① |
Browser-Kompatibilität
Loading…