В этом руководстве вы узнаете об 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 для обработки запроса об ошибке.