В этом руководстве вы узнаете об API Fetch в JavaScript и о том, как использовать его для выполнения асинхронных HTTP-запросов и получения данных с сервера.
Fetch API — это современный интерфейс, позволяющий отправлять HTTP-запросы к серверам из веб-браузеров.
Если вы работали с XMLHttpRequest ( XHR ), метод может выполнять все задачи, как и объект 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();Выход:
200 OK
Если запрошенный ресурс не существует, код ответа — 404 :
let response = await fetch('/non-existence.txt');
console.log(response.status); // 400
console.log(response.statusText); // Not FoundВыход:
400 Not Found
Если запрошенный URL-адрес выдает ошибку сервера, код ответа будет 500 .
Если запрошенный URL-адрес перенаправляется на новый с ответом 300-309 , status объекта Response устанавливается на 200 . Кроме того, для redirected установлено значение true .
fetch() возвращает обещание, которое отклоняется, когда происходит реальный сбой, например тайм-аут веб-браузера, потеря сетевого подключения или нарушение CORS.
Пример
Предположим, у вас есть файл json, который находится на веб-сервере со следующим содержимым:
[{
"username": "john",
"firstName": "John",
"lastName": "Doe",
"gender": "Male",
"profileURL": "img/male.png",
"email": "john.doe@example.com"
},
{
"username": "jane",
"firstName": "Jane",
"lastName": "Doe",
"gender": "Female",
"profileURL": "img/female.png",
"email": "jane.doe@example.com"
}
]Ниже показана 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 API позволяет асинхронно запрашивать ресурс.
- Используйте метод
fetch(), чтобы вернуть промис, который преобразуется в объектResponse. Чтобы получить фактические данные, вы вызываете один из методов объекта Response, например,text()илиjson(). Эти методы разрешаются в фактические данные. - Используйте
statusиstatusTextобъектаResponse, чтобы получить статус и текст статуса ответа. - Используйте метод
catch()илиtry...catchдля обработки запроса об ошибке.