MySQL Java JavaScript PHP Python HTML-CSS C-sharp

Configurarea parametrilor cererii. Trimiterea datelor

Funcția fetch() poate accepta opțiuni suplimentare ale cererii sub forma celui de-al doilea parametru opțional:

fetch(resursa [, init])

Parametrul init reprezintă un obiect complex, care poate avea un set larg de opțiuni:

  • method: metodă de cerere, de exemplu, GET, POST, PUT etc.
  • headers: antetele stabilite în cerere
  • body: corpul cererii - datele care sunt adăugate în cerere
  • mode: modul cererii, de exemplu, cors, no-cors și same-origin
  • credentials: definește acțiunile cu acreditările (cookies, date de autentificare HTTP și certificate client TLS). Acceptă una dintre următoarele valori: - omit: acreditările sunt excluse din cerere, iar orice acreditări trimise în răspuns de server sunt ignorate- same-origin: acreditările sunt incluse doar în acele cereri și sunt acceptate în răspunsuri doar pentru acele cereri, adresa cărora aparține aceluiași domeniu ca și adresa clientului.- include: acreditările sunt incluse în orice cereri și sunt acceptate în răspunsuri pentru orice cereri
  • cache: stabilește principiul interacțiunii cu cache-ul browserului. Valorile posibile: default, no-store, reload, no-cache, force-cache și only-if-cached
  • redirect: stabilește cum să reacționeze la redirecționări. Poate accepta următoarele valori: - follow: aplică automat redirecționarea- error: la redirecționare generează o eroare- manual: prelucrează răspunsul în alt context
  • referrer: definește referentul cererii
  • referrerPolicy: definește politica referentului - cum informația despre referent va fi transmisă în cerere. Poate accepta următoarele valori: no-referrer, no-referrer-when-downgrade, same-origin, origin, strict-origin, origin-when-cross-origin, strict-origin-when-cross-origin și unsafe-url
  • integrity: conține valoarea de control a resursei
  • keepalive: permite cererii să existe mai mult decât durata de viață a paginii web
  • signal: oferă obiectul AbortSignal și permite anularea executării cererii

Exemplu de configurare a opțiunilor:

fetch("/user", {
       method: "GET",
       headers: { "Accept": "application/json" }
   })
   .then(response => response.json())
   .then(user => console.log(user));

În acest caz, setăm metoda de cerere ca "GET" și antetul "Accept" - valoarea sa "application/json" indică faptul că clientul acceptă date în format json.

Este de remarcat că proprietatea headers reprezintă un obiect Headers. Putem aplica metodele acestui obiect pentru a seta antetele:

const myHeaders = new Headers();
myHeaders.append("Accept", "application/json");
fetch("/user", {
       method: "GET",
       headers: myHeaders
   })
   .then(response => response.json())
   .then(user => console.log(user));

Metoda append() adaugă un anumit antet, al cărui nume este transmis prin primul parametru, iar valoarea antetului - prin al doilea parametru.

De asemenea, se poate folosi metoda set() pentru a seta un antet, iar dacă antetul a fost deja adăugat anterior, metoda set() înlocuiește valoarea acestuia. Dacă este necesar să se șteargă un antet adăugat anterior, se poate folosi metoda delete(), care primește numele antetului care trebuie eliminat:


const myHeaders = new Headers();
myHeaders.append("Accept", "application/json"); // adăugăm antetul Accept
myHeaders.set("Accept", "text/xml");        // Modificăm valoarea antetului
myHeaders.delete("Accept");                 // Ștergem antetul

Trimiterea datelor în cerere

Pentru trimiterea datelor în cerere în funcția fetch(), se utilizează opțiunea body ca parte a celui de-al doilea parametru. Aceste date pot fi de tipurile Blob, BufferSource, FormData, URLSearchParams, USVString și ReadableStream. Este important de reținut că în cererile cu metoda GET și HEAD, această opțiune nu poate fi setată.

Pentru testarea trimiterii, vom defini un server simplu în node.js, care acceptă datele:

const http = require("http");
const fs = require("fs");

http.createServer(async (request, response) => {
     
   if(request.url == "/user"){
       
         const buffers = [];   // buffer pentru datele primite

        // primim datele din cerere în buffer
         for await (const chunk of request) {
           buffers.push(chunk);
         }
       // obținem reprezentarea ca șir de caractere a răspunsului
       let userName = Buffer.concat(buffers).toString();
       userName = userName + " Smith";
       response.end(userName);
   }
   else{
       fs.readFile("index.html", (error, data) => response.end(data));
   }
}).listen(3000, ()=>console.log("Serverul a fost pornit la adresa http://localhost:3000"));

În acest caz, când se accesează adresa "/user", serverul primește toate datele trimise. Obiectul de cerere oferă un iterator pentru extragerea datelor. Și în codul serverului, aceste date sunt transmise într-un array-buffer special:

for await (const chunk of request){
   buffers.push(chunk);
}

Apoi, folosind metoda Buffer.concat(), combinăm toate datele primite și formăm un șir de caractere din ele:

let userName = Buffer.concat(buffers).toString();

În acest caz, presupunem că pe server este trimis un simplu text care reprezintă un nume de utilizator. Pentru exemplu, la acest nume se adaugă un prenume și numele modificat este trimis înapoi clientului:

userName = userName + " Smith";
response.end(userName);

Acum, să definim pe pagina index.html codul pentru trimiterea datelor către acest server:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>FDC.COM</title>
</head>
<body>
<script>
fetch("/user", { method: "POST", body: "Tom" })
   .then(response => response.text())
   .then(userName => console.log(userName));
</script>
</body>
</html>

Pentru trimitere se utilizează metoda POST. Ca date trimise se folosește un simplu text "Tom". Astfel, trimitem un text simplu. Și, deoarece serverul răspunde, de asemenea, cu text, pentru obținerea răspunsului aici se folosește metoda response.text(). Și la lansarea acestei pagini web va fi efectuată trimiterea datelor către server, iar în consola browserului vom putea vedea răspunsul primit de la server:

În mod similar, se pot trimite date mai complexe structural. De exemplu, să luăm în considerare trimiterea datelor JSON. Pentru aceasta, pe partea de Node.js, vom defini următorul server:

const http = require("http");
const fs = require("fs");

http.createServer(async (request, response) => {
   if(request.url == "/user"){
       const buffers = [];
       for await (const chunk of request) {
           buffers.push(chunk);
       }
       const data = Buffer.concat(buffers).toString();
       const user = JSON.parse(data); // transformăm șirul în JSON
       // modificăm datele obiectului primit
       user.name = user.name + " Smith";
       user.age += 1;
       // trimitem obiectul modificat înapoi clientului
       response.end(JSON.stringify(user));
   } else {
       fs.readFile("index.html", (error, data) => response.end(data));
   }
}).listen(3000, () => console.log("Serverul a fost pornit la adresa http://localhost:3000"));

În acest caz, pe server ne așteptăm să primim un obiect în format JSON, care are două proprietăți - name și age. Pentru exemplu, serverul modifică valorile acestor proprietăți și trimite obiectul modificat înapoi clientului.

Pe pagina web, setăm un obiect JSON pentru a fi trimis și primim datele înapoi folosind metoda response.json():


fetch("/user", {
   method: "POST",
   headers: { "Accept": "application/json", "Content-Type": "application/json" },
   body: JSON.stringify({
       name: "Tom",
       age: 37
   })
})
.then(response => response.json())
.then(user => console.log(user.name, "-", user.age));

Aceasta demonstrează cum se pot trimite și primi date structurate, cum ar fi JSON, între client și server folosind Node.js și fetch API în JavaScript.

← Lecția anterioară Lecția următoare →