Для представления ответа от сервера в Fetch API применяется интерфейс Response. Функция fetch() возвращает объект Promise, функция-коллбек в котором в качестве параметра получает объект Response с полученным от сервера ответом:
fetch("/hello").then(response => /* действия с response */ )
Либо можно использовать async/await для получения объекта Response
async function getText() {
// получаем объект ответа
const response = await fetch("http://localhost:3000/hello");
// действия с объектом response .......
}
С помощью свойств объекта Response можно получить из полученного ответа различную информацию. Объект Response имеет следующие свойства:
body: содержимое ответа в виде объекта ReadableStream
bodyUsed: хранит булевое значение, которое указывает, было ли содержимое ответа уже использовано.
headers: набор заголовков ответа в виде объекта Headers
ok: хранит булевое значение, которое указывает, завершился ли запрос успешно (то есть если статусной код ответа находится в диапазоне 200-299)
redirected: хранит булевое значение, которое указывает, является ли ответ результатом переадресации
status: хранит статусный код ответа
statusText: хранит сообщение статуса, которое соответствует статусному коду
type: хранит тип ответа
url: хранит адрес URL. Если в процессе запроса происходит ряд переадресаций, то хранит конечный адрес URL после всех переадресаций
Стоит отметить, что все эти свойства доступны только для чтения. Например, используем ряд свойств для получения информации об ответа сервера. Для этого определим следующий сервер на 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"));
На странице index.html вызовем функцию fetch и получим информацию об ответе:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
</head>
<body>
<script>
fetch("/hello")
.then(response => {
console.log(response.status); // 200
console.log(response.statusText); // OK
console.log(response.url); // http://localhost:3000/hello
});
</script>
</body>
</html>
Аналогичный пример с async/await:
getResponse();
async function getResponse() {
const response = await fetch("/hello");
console.log(response.status); // 200
console.log(response.statusText); // OK
console.log(response.url); // http://localhost:3000/hello
}
Свойство ok возвращает true, если статусный код ответа в диапазоне от 200 до 299, что обычно говорит о том, что запрос успешно выполнен.
И мы можем проверять это свойство перед ббработкой ответа:
fetch("/hello").then(response => {
if(response.ok){
// обработка ответа
}
});
С помощью свойства headers можно получить заголовки ответа, которые представляют интерфейс Headers.
Для получения данных из заголовков мы можем воспользоваться один из следующих методов интерфейса Headers:
entries(): возвращает итератор, который позволяет пройтись по всем заголовкам
forEach(): осуществляет перебор заголовков
get(): возвращает значение определенного заголовка
has(): возвращает true, если установлен определенный заголовок
keys(): получает все названия установленных заголовков
values(): получает все значения установленных заголовков
Например, получим все заголовки ответа:
fetch("/hello").then(response => {
for(header of response.headers){
console.log(header[0],":",header[1]);
}
});
Каждый заголовок представляет массив из двух элементов, где первый элемент - название заголовка, а второй - его значение.
Вывод консоли браузера в моем случае:
connection : keep-alive content-length : 22 date : Fri, 03 Dec 2021 17:09:34 GMT keep-alive : timeout=5
Другой пример - проверка заголовка и при его наличии вывод его значения:
fetch("/hello").then(response => {
const headerTitle = "date"; // название заголовка
if(response.headers.has(headerTitle)){ // если заголовок есть
console.log(response.headers.get(headerTitle)); // получаем его значение
}
});
Таким образом, мы можем получать и кастомные заголовки, которые устанавливаются на стороне сервера. Например, пусть сервер node.js устанавливает заголовок "Secret-Code":
const http = require("http");
const fs = require("fs");
http.createServer(function(request, response){
if(request.url == "/hello"){
response.setHeader("Secret-Code", 124);
response.end("Fetch на METANIT.COM");
}
else{
fs.readFile("index.html", (error, data) => response.end(data));
}
}).listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000"));
Для установки заголовка в node.js применяется метод response.setHeader(), первый параметр которого - название заголовка, а второй его значение.
Получим этот заголовок на веб-странице:
fetch("/hello").then(response => {
console.log(response.headers.get("Content-Type")); // null - заголовок не установлен
console.log(response.headers.get("Secret-Code")); // 124
});
Если заголовок не установлен, то метод response.headers.get() возвращает null.
Если в процессе запроса произошла переадресация, то свойство redirected равно true, а свойство
url хранит адрес, на который произошла переадресация. Например, пусть сервер на node.js выполняет переадресацию с адреса "/hello"
на адрес "/newpage":
const http = require("http");
const fs = require("fs");
http.createServer(function(request, response){
if(request.url == "/hello"){
response.statusCode = 302; // 302 - код временной переадресации
response.setHeader("Location", "/newpage"); // переадресация на адрес localhost:3000/newpage
response.end();
}
else if(request.url == "/newpage"){
response.setHeader("Secret-Code", "New Page Code: 567"); // для теста устанавливаем заголовок
response.end("This is a new page");
}
else{
fs.readFile("index.html", (error, data) => response.end(data));
}
}).listen(3000, ()=>console.log("Сервер запущен по адресу http://localhost:3000"));
Выполним запрос по адресу "/hello" на веб-странице:
fetch("/hello").then(response =>{
if (response.redirected) {
console.log("Произошел редирект на адрес", response.url);
console.log(response.headers.get("Secret-Code"));
}
});
Вывод консоли браузера:
Произошел редирект на адрес http://localhost:3000/newpage New Page Code: 567
По консольному выводу, а именно по заголовку Secret-Code мы видим, что функция fetch получила ответ от нового адреса - "/newpage".