JavaScript Fetch API

Краткое описание: в этом руководстве вы узнаете о JavaScript Fetch API и о том, как использовать его для выполнения асинхронных HTTP-запросов.

Fetch API — это современный интерфейс, позволяющий выполнять HTTP-запросы к серверам из веб-браузеров.

Если вы работали с объектом XMLHttpRequest (XHR), то Fetch API может выполнять все те же задачи, что и объект XHR.

Кроме того, Fetch API намного проще и чище. Он использует Promise для предоставления более гибких возможностей для выполнения запросов к серверам из веб-браузеров.

Метод fetch() доступен в глобальной области видимости и дает указание веб-браузерам отправить запрос на URL.

Содержание

Отправка запроса
Чтение ответа
Обработка кодов состояния ответа
Пример JavaScript Fetch API
Резюме

Отправка запроса

Метод fetch() требует только один параметр — URL ресурса, который вы хотите получить:

let response = fetch(url);
Code language: JavaScript (javascript)

Метод fetch() возвращает Promise, поэтому вы можете использовать методы then() и catch() для его обработки:

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });
Code language: JavaScript (javascript)

Когда запрос завершается, ресурс становится доступным. В это время обещание разрешится в объект Response.

Объект Response является оберткой API для полученного ресурса. Объект Response имеет ряд полезных свойств и методов для проверки ответа.

Чтение ответа

Если содержимое ответа находится в формате необработанного текста, вы можете использовать метод text(). Метод text() возвращает Promise, который разрешается с полным содержимым полученного ресурса:

fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));
Code language: JavaScript (javascript)

На практике вы часто используете async/await с методом fetch() вот так:

async function fetchText() {
    let response = await fetch('/readme.txt');
    let data = await response.text();
    console.log(data);
}
Code language: JavaScript (javascript)

Помимо метода 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();
Code language: JavaScript (javascript)

Выход:

200
OK
Code language: JavaScript (javascript)

Если запрашиваемый ресурс не существует, код ответа 404:

let response = await fetch('/non-existence.txt');

console.log(response.status); // 400
console.log(response.statusText); // Not Found
Code language: JavaScript (javascript)

Выход:

400
Not Found
Code language: JavaScript (javascript)

Если запрашиваемый URL вызывает ошибку сервера, код ответа будет 500.

Если запрошенный URL перенаправлен на новый с ответом 300-309, status объекта Response устанавливается в 200. Кроме того, свойство redirected устанавливается в true.

Функция fetch() возвращает обещание, которое отклоняется при возникновении реальных сбоев, таких как таймаут веб-браузера, потеря сетевого соединения и нарушение CORS.

Пример JavaScript Fetch API

Предположим, что у вас есть 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"
    }
]
Code language: JSON / JSON with Comments (json)

Ниже показана 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>
Code language: HTML, XML (xml)

В 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);
    }
}
Code language: JavaScript (javascript)

Затем разработайте функцию 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();
Code language: JavaScript (javascript)

Посмотрите демонстрацию Fetch API.

Резюме

Fetch API позволяет вам асинхронно запрашивать ресурс.
Используйте метод fetch(), чтобы вернуть обещание, которое преобразуется в объект Response. Чтобы получить фактические данные, вы вызываете один из методов объекта Response, например, text() или json(). Эти методы преобразуются в фактические данные.
Используйте свойства status и statusText объекта Response для получения статуса и текста статуса ответа.
используйте метод catch() или оператор try...catch для обработки отказавшего запроса.