Response.text() — Methode · JavaScript-Referenz

Signatur

Response.prototype.text()

Beschreibung

Die Methode text() gehört zu den Body-Methoden der Response-Schnittstelle der Fetch-API. Sie liest den ReadableStream im Body der Antwort bis zum Ende aus und gibt ein Promise zurück, das mit dem vollständigen Inhalt als String erfüllt wird. Dekodiert wird immer als UTF-8, egal welcher Zeichensatz im Content-Type-Header steht.

Nutzen Sie text(), wenn die Antwort Klartext ist, etwa HTML, CSV, Markdown, XML, SVG oder Logdateien. Auch zur Fehlersuche ist die Methode praktisch: Liefert ein Server statt JSON unerwartet eine HTML-Fehlerseite, liest text() sie trotzdem problemlos aus, während json() an dieser Stelle einen SyntaxError wirft.

Wichtig: Der Body lässt sich nur einmal lesen. Nach dem Aufruf ist response.bodyUsed gleich true, und jeder weitere Aufruf einer Body-Methode (text(), json(), blob() …) wird mit einem TypeError abgelehnt. Wenn Sie den Inhalt mehrfach brauchen, erstellen Sie vorher mit response.clone() eine Kopie.

Rückgabewert

Typ

Promise<string>

Beschreibung

Ein Promise, das mit dem vollständigen Body als UTF-8-dekodiertem String erfüllt wird. Bei leerem Body ist das Ergebnis "". Das Promise wird mit einem TypeError abgelehnt, wenn der Body schon gelesen wurde oder gesperrt ist. Bricht der Stream ab (Netzwerkfehler, AbortSignal), wird es ebenfalls abgelehnt, bei einem Abbruch mit einer DOMException namens AbortError.

Beispiele

HTML-Fragment laden und einfügen

const loadPartial = async (url) => {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  const html = await response.text();
  console.log(`Geladen: ${html.length} Zeichen`);
  return html;
};

const html = await loadPartial('/partials/footer.html');
// Nur bei vertrauenswürdigen Quellen direkt einfügen!
document.querySelector('#footer').innerHTML = html;

Geladen: 1532 Zeichen

CSV-Datei einlesen und parsen

const response = await fetch('/data/umsatz.csv');
const csv = await response.text();

const [header, ...rows] = csv.trim().split('\n');
const keys = header.split(',');
const records = rows.map((line) => {
  const values = line.split(',');
  return Object.fromEntries(keys.map((k, i) => [k, values[i]]));
});

console.log(records[0]);

{ monat: 'Januar', umsatz: '12400' }

Robustes JSON-Parsing mit Fehlerausgabe

const fetchJson = async (url) => {
  const response = await fetch(url);
  const raw = await response.text(); // Body nur einmal lesen
  try {
    return JSON.parse(raw);
  } catch {
    throw new Error(
      `Kein gültiges JSON (Status ${response.status}): ${raw.slice(0, 100)}`
    );
  }
};

try {
  const user = await fetchJson('/api/user/42');
  console.log(user.name);
} catch (err) {
  console.error(err.message);
}

Kein gültiges JSON (Status 502): <!DOCTYPE html><html><head><title>Bad Gateway</title>...

Body mehrfach lesen mit clone()

const response = await fetch('/api/status');
const copy = response.clone();

const text = await response.text();
const data = await copy.json();

console.log(text);
console.log(data.status);
console.log(response.bodyUsed);

{"status":"ok"} ok true

// Wichtig · Fallstricke

Body nur einmal lesbar: Ein zweiter Aufruf von text() oder einer anderen Body-Methode wirft TypeError: body stream already read. Brauchen Sie den Inhalt öfter, rufen Sie vorher response.clone() auf.
Immer UTF-8: Ein charset im Content-Type (z. B. ISO-8859-1) wird ignoriert. Für andere Kodierungen holen Sie die Rohdaten mit arrayBuffer() und dekodieren sie mit new TextDecoder('iso-8859-1').decode(buffer).
HTTP-Fehler lehnen das Promise nicht ab: Bei 404 oder 500 liefert text() ganz normal den Body der Fehlerseite. Prüfen Sie deshalb vorher response.ok bzw. response.status.
Speicher: Die gesamte Antwort landet im Arbeitsspeicher. Große Dateien verarbeiten Sie besser als Stream über response.body.getReader() zusammen mit TextDecoderStream.
Sicherheit: Text von fremden Quellen niemals ungeprüft per innerHTML einfügen, sonst droht XSS. Verwenden Sie textContent oder bereinigen Sie das HTML vorher (z. B. mit DOMPurify).
CORS: Bei mode: 'no-cors' ist die Antwort „opaque“, und text() liefert einen leeren String.
Kompatibilität: Wird von allen modernen Browsern unterstützt, außerdem in Web Workers, Service Workers, Node.js ab Version 18 (global fetch), Deno und Bun. Die Methode gibt es auch auf Request (Request.prototype.text()).

Siehe auch

Response Response.json() Response.blob() Response.clone() Response.bytes()