Obținerea datelor din răspuns
Toate datele trimise de server sunt disponibile în obiectul Response prin proprietatea body, care reprezintă un obiect ReadableStream, dar este mult mai simplu să folosești una dintre metodele obiectului Response. Interfața Response oferă următoarele metode:
- arrayBuffer(): returnează un promise, care obține conținutul răspunsului sub formă de obiect ArrayBuffer
- blob(): returnează un promise, care obține conținutul răspunsului sub formă de obiect Blob
- clone(): returnează o copie a obiectului Response curent
- error(): returnează un nou obiect Response, asociat cu o eroare de rețea apărută
- formData(): returnează un promise, care obține conținutul răspunsului sub formă de obiect FormData
- json(): returnează un promise, care obține conținutul răspunsului sub formă de obiect JSON
- redirect(): returnează un nou obiect Response cu o altă adresă URL
- text(): returnează un promise, care obține conținutul răspunsului sub formă de text
Obținerea răspunsului sub formă de text
Pentru a obține răspunsul sub formă de text se folosește metoda text(). De exemplu, serverul pe Node.js trimite ca răspuns clientului un anumit text:
const http = require("http");
const fs = require("fs");
http.createServer(function(request, response){
if(request.url == "/hello"){
response.end("Fetch pe METANIT.COM");
}
else{
fs.readFile("index.html", (error, data) => response.end(data));
}
}).listen(3000, ()=>console.log("Serverul a fost lansat la adresa http://localhost:3000"));În acest caz, la accesarea adresei "/hello", serverul va trimite ca răspuns clientului textul "Fetch pe FDC.COM".
Pe pagina index.html, cu ajutorul metodei text() obținem acest text:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<script>
fetch("/hello")
.then(response => response.text())
.then(responseText => console.log(responseText));
</script>
</body>
</html>Pentru a obține textul trimis, la obiectul response se apelează metoda response.text(), care returnează un Promise. Și pentru a obține de fapt textul răspunsului, se atașează o a doua metodă then(), în care, în funcția callback, obținem textul răspunsului:
.then(responseText => console.log(responseText));Sau se poate folosi async/await:
getText();
async function getText() {
// obținem obiectul răspuns
const response = await fetch("/hello");
// extragem textul răspunsului din obiectul răspuns
const responseText = await response.text();
console.log(responseText);
}Obținerea răspunsului sub formă de json
Să presupunem că serverul trimite un obiect json:
const http = require("http");
const fs = require("fs");
http.createServer(function(request, response){
if(request.url == "/user"){
const user = {name: "Tom", age: 37};
response.end(JSON.stringify(user));
}
else{
fs.readFile("index.html", (error, data) => response.end(data));
}
}).listen(3000, ()=>console.log("Serverul a fost lansat la adresa http://localhost:3000"));În acest caz, serverul, la accesarea adresei "/user", trimite obiectul user sub formă de cod json.
Obținem acest obiect:
fetch("/user")
.then(response => response.json())
.then(user => console.log(user.name, " - ", user.age));Metoda json() returnează un obiect Promise, deci în a doua metodă then() putem obține obiectul json trimis și ne putem referi la proprietățile sale:
.then(user => console.log(user.name, "-", user.age));Același exemplu cu folosirea async/await:
getUser();
async function getUser() {
// obținem obiectul răspuns
const response = await fetch("/user");
// extragem json din obiectul răspuns
const user = await response.json();
console.log(user.name, "-", user.age);
}Trimiterea seturilor de date
În mod similar, se pot obține seturi de obiecte în format json. Să presupunem că serverul pe node.js trimite un array de obiecte:
const http = require("http");
const fs = require("fs");
http.createServer(function(request, response){
if(request.url == "/users.json"){
const users = [
{name: "Tom", age: 37},
{name: "Sam", age: 25},
{name: "Bob", age: 41}
];
response.end(JSON.stringify(users));
}
else{
fs.readFile("index.html", (error, data) => response.end(data));
}
}).listen(3000, ()=>console.log("Serverul a fost lansat la adresa http://localhost:3000"));Obținem aceste date pe pagina web:
fetch("/users.json")
.then(response => response.json())
.then(users => users.forEach(user => console.log(user.name, " - ", user.age)));
// analog cu async/await
getUsers();
async function getUsers() {
const response = await fetch("/users.json");
const users = await response.json();
users.forEach(user => console.log(user.name, " - ", user.age))
}Trimiterea fișierului json
Să presupunem că în folderul serverului este definit fișierul users.json cu următorul conținut:
[
{"name": "Tom", "age": 37},
{"name": "Sam", "age": 25},
{"name": "Bob", "age: 41"}
]
În cazul serverului node.js, am putea trimite acest fișier în următorul mod:
const http = require("http");
const fs = require("fs");
http.createServer(function(request, response){
if(request.url == "/users.json"){
fs.readFile("users.json", (error, data) => response.end(data));
}
else{
fs.readFile("index.html", (error, data) => response.end(data));
}
}).listen(3000, ()=>console.log("Serverul a fost lansat la adresa http://localhost:3000"));În funcție de tehnologia specifică serverului, trimiterea fișierelor poate varia. Aici, la fel ca în cazul trimiterii fișierului index.html, citim datele din fișierul users.json folosind funcția fs.readFile() și le trimitem ca răspuns.
Pe partea clientului ar fi același cod ca în cazul precedent:
fetch("/users.json")
.then(response => response.json())
.then(users => users.forEach(user => console.log(user.name, " - ", user.age)));Încărcarea datelor binare
Cu ajutorul metodei blob() se pot încărca date binare. Să luăm exemplul imaginilor. Să presupunem că pe server există fișierul fox.png.
Să presupunem că serverul node.js trimite acest fișier la accesarea adresei "fox.png":
const http = require("http");
const fs = require("fs");
http.createServer(function(request, response){
if(request.url == "/fox.png"){
fs.readFile("fox.png", (error, data) => response.end(data));
}
else{
fs.readFile("index.html", (error, data) => response.end(data));
}
}).listen(3000, ()=>console.log("Serverul a fost lansat la adresa http://localhost:3000"));Pe pagina web index.html, pentru a accesa serverul, definim următorul cod:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FDC.COM</title>
</head>
<body>
<img />
<script>
const
img = document.querySelector("img");
fetch("/fox.png")
.then(response => response.blob())
.then(data => img.src = URL.createObjectURL(data));
</script>
</body>
</html>Pentru afișarea imaginii pe pagina web, este definit elementul <img>
Metoda blob() returnează un obiect Promise, care obține datele răspunsului sub formă de obiect Blob. Și în a doua metodă then() obținem acest obiect:
.then(data => img.src = URL.createObjectURL(data));Aici trebuie să stabilim pentru elementul html <img> ca sursă de imagine fișierul obținut. Pentru acest lucru se apelează funcția URL.createObjectURL(), în care se transmite obiectul Blob. Această funcție creează o adresă URL, la care se proiectează fișierul încărcat.
Astfel, după executarea cererii, elementul html <img> va afișa imaginea încărcată. Pentru aplicarea acestui exemplu, descărcați o simplă imagine de tip png și salvați-o în fișierul cu care lucrați ( la mine el este app), după înlocuiți în codul sursă denumirea imaginii ( în cazul meu - fox.png ) cu denumirea imaginii voastre:
Exemplu similar cu utilizarea async/await:
const img = document.querySelector("img");
getImage();
async function getImage() {
const response = await fetch("/fox.png");
const imgBlob = await response.blob();
img.src = URL.createObjectURL(imgBlob);
}În mod similar, se pot obține și utiliza alte tipuri de fișiere, de exemplu, fișiere audio și video.