Получение данных из ответа

Последнее обновление: 05.12.2021

Все данные, которые отправил сервер, доступны в объекте Response через свойство body, которое представляет объект ReadableStream, но гораздо проще воспользоваться одним из методов объекта Response. Интерфейс Response предоставляет следующие методы:

  • arrayBuffer(): возвращает promise, который получает содержимое ответа в виде объекта ArrayBuffer

  • blob(): возвращает promise, который получает содержимое ответа в виде объекта Blob

  • clone(): возвращает копию текущего объекта Response

  • error(): возвращает новый объект Response, который ассоциирован с возникшей ошибкой сети

  • formData(): возвращает promise, который получает содержимое ответа в виде объекта FormData

  • json(): возвращает promise, который получает содержимое ответа в виде объекта JSON

  • redirect(): возвращает новый объект Response с другим адресом URL

  • text(): возвращает promise, который получает содержимое ответа в виде строки текста

Получение ответа в виде текста

Для получения ответа в виде текста применяется метод text(). Например, сервер на Node.js отправляет в ответ клиенту некоторый текст:

const http = require("http");
const fs = require("fs");
   
http.createServer(function(request, response){
     
	if(request.url == "/hello"){
        response.end("Fetch на METANIT.COM");
    }
    else{
		fs.readFile("index.html", (error, data) => response.end(data));
    }
}).listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000"));

В данном случае при обращении по адресу "/hello" сервер будет отправлять в ответ клиенту строку текста "Fetch на METANIT.COM".

На странице index.html с помощью метода text() получим эту строку

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>METANIT.COM</title>
</head>
<body>
<script>
fetch("/hello")
    .then(response => response.text())
    .then(responseText => console.log(responseText));
</script>
</body>
</html>

Для получения отправленного текста у объекта response вызывается метод response.text(), который возвращает Promise. И чтобы получить собственно текст ответа, подсоединяем второй метод then(), в котором в функции-колбеке получаем текст ответа:

then(responseText => console.log(responseText));

Либо можно использовать async/await

getText();
async function getText() {
	// получаем объект ответа
	const response = await fetch("/hello");
	// из объекта ответа извлекаем текст ответа
	const responseText = await response.text();
	console.log(responseText);
}

Получение ответа в виде json

Пусть сервер отправляет некоторый 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("Сервер запущен по адресу http://localhost:3000"));

В данном случае сервер при обращении по адресу "/user" отправляет объект user в виде кода json.

Получим этот объект:

fetch("/user")
	.then(response => response.json())
    .then(user => console.log(user.name, " - ", user.age));

Метод json() возвращает объект Promise, поэтому во втором методе then() можно получить собственно отправленный объект json и обратиться к его свойствам:

.then(user => console.log(user.name, "-", user.age));

Тот же пример с применением async/await:

getUser();
async function getUser() {
	// получаем объект ответа
	const response = await fetch("/user");
	// из объекта ответа извлекаем json
	const user = await response.json();
	console.log(user.name, "-", user.age);
}

Отправка набора данных

Аналогичым образом можно получать набор объектов в формате json. Допустим, сервер на node.js отправляет массив объектов:

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("Сервер запущен по адресу http://localhost:3000"));

Получим эти данные на веб-странице:

fetch("/users.json")
	.then(response => response.json())
    .then(users => users.forEach(user=> console.log(user.name, " - ", user.age)));
	
// аналог с 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))
}

Отправка файла json

Пусть в папке сервера определен файл users.json со следующим содержимым:

[
	{"name": "Tom", "age": 37},
	{"name": "Sam", "age": 25},
	{"name": "Bob", "age": 41}
]
Получение файла json в fetch и javascript

В случае с сервером node.js мы могли бы в качестве варианта отправить данный файл следующим образом:

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("Сервер запущен по адресу http://localhost:3000"));

В зависимости от конкретной технологии сервера отправка файлов может отличаться. Здесь же, как и в случае с отправкой файла index.html, считываем данные из файла users.json с помощью функции fs.readFile() и отправляем в ответ.

На стороне клиента был бы тот же код, что и в предыдущем случае:

fetch("/users.json")
	.then(response => response.json())
    .then(users => users.forEach(user=> console.log(user.name, " - ", user.age)));

Загрузка бинарных данных

С помощью метода blob() можно загрузить бинарные данные. Рассмотрим на примере изображений. Допустим, на сервере есть файл forest.png

blob и загрузка бинарных данных в fetch и javascript

Пусть сервер node.js отправляет данный файл при обращении по адресу "forest.png":

const http = require("http");
const fs = require("fs");
   
http.createServer(function(request, response){
     
	if(request.url == "/forest.png"){
		fs.readFile("forest.png", (error, data) => response.end(data));
    }
    else{
		fs.readFile("index.html", (error, data) => response.end(data));
    }
}).listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000"));

На веб-странице index.html для обращения к серверу определим следующий код:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>METANIT.COM</title>
</head>
<body>
 <img />
<script>
const img = document.querySelector("img");
fetch("/forest.png")
	.then(response => response.blob())
    .then(data => img.src = URL.createObjectURL(data));
</script>
</body>
</html>

Для показа изображения на веб-странице определен элемент <img >

Метод blob() возвращает объект Promise, который получает данные ответа в виде объекта Blob. И во втором методе then() получаем этот объект:

then(data => img.src = URL.createObjectURL(data));

Здесь нам надо для html-элемента <img > в качестве источника изображения установить полученный файл. Для этого вызывается функция URL.createObjectURL(), в которую передается объект Blob. Эта функция создает адрес URL, на который проецируется загруженный файл. Соответственно после выполнения запроса html-элемент <img > отобразит загруженное изображение:

загрузка файлов в fetch и javascript с помощью метода response.blob

Аналогичый пример с применением async/await:

const img = document.querySelector("img");
getImage();
async function getImage() {
	const response = await fetch("/forest.png");
	const imgBlob = await response.blob();
	img.src = URL.createObjectURL(imgBlob);
}

Подобным образом можно получать и использовать другие типы файлов, например, аудио и видеофайлы.

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850