В этом руководстве вы узнаете об API JavaScript Fetch и о том, как его использовать для выполнения асинхронных HTTP-запросов.
Fetch API — это современный интерфейс, позволяющий отправлять HTTP-запросы к серверам из веб-браузеров.
Если вы работали с объектом XMLHttpRequest
(XHR
), Fetch API может выполнять все задачи так же, как объект XHR
.
Кроме того, Fetch API намного проще и чище. Он использует Promise
для предоставления более гибких функций для выполнения запросов к серверам из веб-браузеров.
Метод fetch()
доступен в глобальной области, которая указывает веб-браузерам отправлять запрос на URL-адрес.
Отправка запроса
Для fetch()
требуется только один параметр, который является URL-адресом ресурса, который вы хотите получить:
let response = fetch(url);
Метод fetch()
возвращает Promise
, поэтому вы можете использовать методы then()
и catch()
для его обработки:
fetch(url) .then(response => { // handle the response }) .catch(error => { // handle the error });
Когда запрос завершится, ресурс будет доступен. В это время обещание будет преобразовано в объект Response
.
Объект Response
является оболочкой API для извлеченного ресурса. Объект Response
имеет ряд полезных свойств и методов для проверки ответа.
Чтение ответа
Если содержимое ответа представлено в формате необработанного текста, вы можете использовать метод text()
. Метод text()
возвращает Promise
, который разрешается с полным содержимым извлеченного ресурса:
fetch('/readme.txt') .then(response => response.text()) .then(data => console.log(data));
На практике вы часто используете async
/await
с методом fetch()
следующим образом:
async function fetchText() { let response = await fetch('/readme.txt'); let data = await response.text(); console.log(data); }
Помимо метода text()
объект Response
имеет другие методы, такие как json()
, blob()
, formData()
и arrayBuffer()
, для обработки соответствующего типа данных.
Обработка кодов состояния ответа
Объект Response
предоставляет код состояния и текст состояния через свойства status
и statusText
. Когда запрос выполнен успешно, код состояния — 200
, а текст состояния — OK
:
async function fetchText() { let response = await fetch('/readme.txt'); console.log(response.status); // 200 console.log(response.statusText); // OK if (response.status === 200) { let data = await response.text(); // handle data } } fetchText();
Если запрошенный ресурс не существует, код ответа 404
:
let response = await fetch('/non-existence.txt'); console.log(response.status); // 400 console.log(response.statusText); // Not Found
Если запрошенный URL выдает ошибку сервера, код ответа будет 500
.
Если запрошенный URL-адрес перенаправляется на новый с ответом 300-309
, status
объекта Response
устанавливается на 200
. Кроме того, для свойства redirected
установлено значение true
.
fetch()
возвращает обещание, которое отклоняется, когда происходит реальный сбой, такой как тайм-аут веб-браузера, потеря сетевого подключения или нарушение CORS.
Пример API выборки JavaScript
Предположим, у вас есть файл JSON, который находится на веб-сервере со следующим содержимым.
[{ "username": "john", "firstName": "John", "lastName": "Doe", "gender": "Male", "profileURL": "img/male.png", "email": "[email protected]" }, { "username": "jane", "firstName": "Jane", "lastName": "Doe", "gender": "Female", "profileURL": "img/female.png", "email": "[email protected]" } ]
Ниже показана HTML-страница:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Fetch API Demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"></div> <script src="js/app.js"></script> </body> </html>
В app.js
мы будем использовать метод fetch()
для получения пользовательских данных и визуализации данных внутри элемента <div>
с классом container
.
Во-первых, объявите функцию getUsers()
, которая получает users.json
с сервера.
async function getUsers() { let url = 'users.json'; try { let res = await fetch(url); return await res.json(); } catch (error) { console.log(error); } }
Затем разработайте функцию renderUsers()
, которая отображает пользовательские данные:
async function renderUsers() { let users = await getUsers(); let html = ''; users.forEach(user => { let htmlSegment = `<div class="user"> <img src="${user.profileURL}" > <h2>${user.firstName} ${user.lastName}</h2> <div class="email"><a href="email:${user.email}">${user.email}</a></div> </div>`; html += htmlSegment; }); let container = document.querySelector('.container'); container.innerHTML = html; } renderUsers();
Краткое содержание
- Fetch API позволяет асинхронно запрашивать ресурс.
- Используйте метод
fetch()
, чтобы вернуть обещание, которое преобразуется в объектResponse
. Чтобы получить фактические данные, вы вызываете один из методов объекта Response, например,text()
илиjson()
. Эти методы разрешаются в фактические данные. - Используйте свойства
status
иstatusText
объектаResponse
, чтобы получить статус и текст статуса ответа. - используйте метод
catch()
или операторtry...catch
для обработки запроса об ошибке.