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