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/
Теперь в папке сервера определим простенький файл index.html
Определим в этом файле следующее содежимое:
<!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
После запуска сервера мы можем перейти в браузере по адресу http://localhost:3000, нам отобразится страница, в javascript-коде которой с помощью функции fetch() произойдет обращение к ресурсу "/hello":
В итоге при обращении к ресурсу "/hello" сервер отправит отправит строку "Fetch на METANIT.COM", которую мы сможем получить на веб-странице.
В примере выше применялся относительный путь, но также можно было бы использовать абсолютный путь с указанием протокола, адреса сервера и порта:
fetch("http://localhost:3000/hello") .then(response => response.text()) .then(responseText => console.log(responseText));
Поскольку функция 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>