Fetch API

Функция fetch

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

Fetch API предоставляет упрощенный и в тоже время гибкий и мощный инструмент для обращения к сетевым ресурсам по сравнению со стандартным XMLHttpRequest.

Ключевым элементом этого Fetch API является функция fetch(). Она реализована в различных контекстах. В частности, в браузере она реализована интерфейсом Windows.

Функция fetch имеет следующий синтаксис:

const fetchPromise = fetch(resource [, init])

В качестве обязательного параметра - resource функция принимает параметры ресурса, к которому функция будет обращаться. В качестве необязательного параметра - init функция может принимать объект с дополнительными настройками запроса.

Функция fetch() возвращает объект Promise, который получает ответ после завершения запроса к сетевому ресурсу.

Определение ресурса на севере

Рассмотрим простейший пример. Итак, прежде всего нам потребуется некоторый сетевой ресурс, к которому мы будем обращаться. Для эмуляции сетевого ресурса используем локальный веб-сервер. Веб-сервер может быть любым. В данном случае воспользуемся самым простым вариантом - Node.js, поэтому перед созданием приложения необходимо установить Node.js. Но опять же вместо node.js это может быть любая другая технология сервера - php, asp.net, python и т.д. либо какой-то определенный веб-сервер типа Apache или IIS.

Итак, создадим на жестком диске папку для файлов веб-сервера. Например, в моем случае это папка C:\app. Далее в этой папке определим файл сервера. Пусть он будет называться server.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"));

Это самый примитивный сервер, который достаточен для нашей задачи. Вкратце пробежимся по коду. Сначала подключаются пакеты с функциональностью, которую мы собираемся использовать:

const http = require("http");	// для обработки входящих запросов
const fs = require("fs");		// для чтения с жесткого диска файла index.html

Для создания сервера применяется функция http.createServer(). В эту функцию передается функция-обработчик, которая вызывается каждый раз, когда к серверу приходит запрос. Эта функция имеет два параметра: request (содержит данные запроса) и response (управляет отправкой ответа).

В функции-обработчике с помощью свойства request.url мы можем узнать, к какому ресурсу на сервере пришел запрос. Так, в данном случае, если пришел запрос по пути "/hello" (условно к ресурсу "/hello"), то оправляем в ответ с помощью метода response.end() текст "Fetch на METANIT.COM":

if(request.url == "/hello"){
	response.end("Fetch на METANIT.COM");
}

Если запрос пришел к какому-то другому ресурсу, то отправляем файл index.html, который мы дальше определим:

else{
	fs.readFile("index.html", (error, data) => response.end(data));
}

Для считывания файлов применяется встроенная функция fs.readFile(). Первый параметр функции - адрес файла (в данном случае предполагается, что файл index.html находится в одной папке с файлом сервера server.js). Второй параметр - функция, которая вызывается после считывания файла и получет его содержимое через свой второй параметр data. Затем считанное содежимое также может быть отпавлено с помощью функции response.end(data).

В конце с помощью функции listen() запускаем веб-сервер на 3000 порту. То есть сервер будет запускаться по адресу http://localhost:3000/

Вызов функции fetch()

Теперь в папке сервера определим простенький файл index.html

веб-сервер node.js для тестирования fetch api в javascript

Определим в этом файле следующее содежимое:

<!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>

В функцию fetch() передается адрес ресурса - в данном случае "/hello".

fetch("/hello")

Поскольку fetch() возвращает объект Promise, то для получения результата запроса мы можем вызвать метод then()

fetch("/hello").then(response => response.text())

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

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

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

Теперь в консоли перейдем к папке сервера с помощью команды cd и запустим сервер с помощью команды

node server.js
Запуск веб-сервера node.js для тестирования fetch api

После запуска сервера мы можем перейти в браузере по адресу http://localhost:3000, нам отобразится страница, в javascript-коде которой с помощью функции fetch() произойдет обращение к ресурсу "/hello":

функция fetch в javascript

В итоге при обращении к ресурсу "/hello" сервер отправит отправит строку "Fetch на METANIT.COM", которую мы сможем получить на веб-странице.

В примере выше применялся относительный путь, но также можно было бы использовать абсолютный путь с указанием протокола, адреса сервера и порта:

fetch("http://localhost:3000/hello")
	.then(response => response.text())
	.then(responseText => console.log(responseText));

fetch с async/await

Поскольку функция fetch() возвращает Promise, то вместо нанизывания методов then() мы можем использовать операторы async/await для извлечения ответа. Например, перепишем предыдущий пример:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
	<title>METANIT.COM</title>
</head>
<body>
<script>
getText();
async function getText() {
	// получаем объект ответа
	const response = await fetch("/hello");
	// из объекта ответа извлекаем текст ответа
	const responseText = await response.text();
	console.log(responseText);
}
</script>
</body>
</html>

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

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