Response (json, text, blob) în JavaScript

Cereri HTTP și comunicare Browserele moderne, Node.js 18+

Răspunsul unei cereri fetch: starea, antetele și metodele care citesc conținutul ca JSON, text sau date binare.

Sintaxă
const raspuns = await fetch(url);
await raspuns.json()
await raspuns.text()
await raspuns.blob()
new Response(corp, optiuni)

Ce face Response (json, text, blob)

Un obiect Response are status (de exemplu 200 sau 404), ok (adevărat pentru 200–299), headers și corpul răspunsului. Corpul se citește o singură dată, cu una dintre metodele asincrone: json(), text(), blob() (fișiere, imagini), arrayBuffer() (octeți), formData(), sau bytes().

clone() creează o copie, dacă ai nevoie să citești corpul de două ori. Poți crea și tu răspunsuri cu new Response(corp, { status, headers }), de exemplu în service workers sau în teste; metodele statice Response.error() și Response.redirect(url, cod) creează un răspuns de eroare de rețea, respectiv de redirecționare.

Parametri

Parametru Descriere
corp Pentru constructor: textul, un Blob, un FormData, octeți sau null.
optiuni Pentru constructor: status, statusText, headers.

Ce returnează

Metodele de citire returnează o Promise cu conținutul.

Exemple

Exemplul 1: Citirea unui răspuns JSON

Ca să poată rula oriunde, exemplul creează răspunsul local, așa cum l-ar primi fetch.

const raspuns = new Response('{"produs":"Carte","pret":45}', {
  status: 200,
  headers: { "Content-Type": "application/json" },
});

console.log(raspuns.ok, raspuns.status, raspuns.headers.get("content-type"));
const copie = raspuns.clone();
console.log(await raspuns.json());
console.log(await copie.text());

Rezultat

true 200 application/json
{ produs: 'Carte', pret: 45 }
{"produs":"Carte","pret":45}

Exemplul 2: Corpul se citește o singură dată

const raspuns = new Response("salut");

console.log(await raspuns.text());
try {
  await raspuns.text();
} catch (e) {
  console.log(e.name, raspuns.bodyUsed);
}

Rezultat

salut
TypeError true

Exemplul 3: Date binare, formular și răspunsuri speciale

const blob = await new Response("abc").blob();
console.log(blob.size, new Uint8Array(await new Response("abc").arrayBuffer()));

const formular = await new Response("oras=Iași&judet=IS", {
  headers: { "Content-Type": "application/x-www-form-urlencoded" },
}).formData();
console.log(formular.get("oras"));

console.log(Response.error().type, Response.redirect("https://www.dexblog.ro/", 301).status);

Rezultat

3 Uint8Array(3) [ 97, 98, 99 ]
Iași
error 301

Greșeli frecvente

  • Apelezi raspuns.json() fără await și primești o promisiune în loc de date.
  • Citești corpul de două ori (de exemplu text() pentru log și apoi json()). A doua citire aruncă TypeError; folosește clone().

Comenzi înrudite

  • fetch: Trimite o cerere HTTP la un server și primește răspunsul, fără reîncărcarea paginii.
  • Headers: Antetele unei cereri sau ale unui răspuns HTTP, cu nume care nu țin cont de majuscule.
  • Blob / File: Un bloc de date imuabil, cu tip MIME (Blob), sau un fișier cu nume și dată (File).