Fetch API

Fetch API — это современный, мощный инструмент сетевых запросов, который позволяет асинхронно запрашивать ресурсы через JavaScript без использования традиционного объекта XMLHttpRequest.

Fetch API позволяет лаконично отправлять HTTP-запросы и обрабатывать ответы сервера.

Fetch API спроектирован на основе Promises, что делает асинхронные операции более лаконичными и понятными.

Преимущества Fetch:

  • Основан наPromises, что делает код более лаконичным и читаемым.
  • Улучшенный механизм обработки ошибок: срабатывает только при сетевых ошибках (таких как невозможность подключиться к серверу)catch, а не при ошибках статус-кода.
  • Поддерживает множество форматов данных (JSON, текст, двоичные данные и т. д.).
  • Может обрабатывать кросс-доменные запросы черезCORSнастройку механизма.

Базовое использование fetch

Синтаксис fetch довольно лаконичен; самая базовая форма выглядит так:

fetch(url)
  .then(response => response.json()) // 解析 JSON 数据
  .then(data => console.log(data))   // 处理数据
  .catch(error => console.error('Error:', error)); // 错误处理

Параметры:

  • url: Целевой URL для отправки запроса.
  • options(необязательно): можно указать метод запроса (GET, POST и т. д.), заголовки запроса, тело запроса и многое другое.

Возвращаемое значение

Возвращает объект Promise. Promise возвращает объект Response при успешном запросе и отклоняется при ошибке.

Использование Fetch

1. Базовый GET-запрос:

Пример

fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

В этом примере fetch по умолчанию выполняет GET-запрос. Возвращаемый ответ — это объект Response, а данные JSON анализируются с помощью вызова метода .json().

2. Отправка POST-запроса:

Пример

fetch('https://api.example.com/data', {
    method: 'POST', // Укажите метод запроса
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        key: 'value'
    })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Здесь мы отправляем POST-запрос, устанавливая method в 'POST', и отправляем данные в формате JSON в теле запроса.

3. Обработка статуса ответа:

Пример

fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Сетевой ответ не был успешным ' + response.statusText);
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

При обработке ответа мы сначала проверяем, успешен ли статус ответа (response.ok), и выбрасываем ошибку, если нет.

4. Отправка запросов с учётными данными:

Пример

fetch('https://api.example.com/data', {
    credentials: 'include' // Включить куки в запрос
});

Использование credentials: 'include' позволяет отправлять cookies в кросс-доменных запросах.

5. Использование объектов Request и Response:

Пример

const request = new Request('flowers.jpg');
fetch(request)
    .then(response => response.blob())
    .then(imageBlob => {
        const imageObjectUrl = URL.createObjectURL(imageBlob);
        img.src = imageObjectUrl;
    });

Вы можете создать объект Request, чтобы настроить запрос. fetch возвращает объект Response, который можно использовать для получения различных типов тела ответа, таких как blob, text, json и т. д.

6. Обработка ошибок:

Пример

fetch('https://api.example.com/data')
    .then(response => {
        if (response.ok) {
            return response.json();
        }
        throw new Error('Something went wrong');
    })
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

В цепочке вызовов ошибки, выброшенные в любом месте, будут перехвачены .catch().

7. Настройка заголовков запроса

Вы можете добавить пользовательские HTTP-заголовки в запрос с помощью свойства headers, например Content-Type, Authorization и т. д.

Пример

fetch('https://example.com/api', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your-token'
    },
    body: JSON.stringify({ name: 'John', age: 30 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

8. Обработка статусов ответа, отличных от 200

fetch не рассматривает автоматически HTTP-статусы ошибок (такие как 404 или 500) как отклонённые Promise; вам всё ещё нужно проверять статус ответа.

Пример

fetch('https://example.com/api')
  .then(response => {
    if (!response.ok) { // Проверьте статус ответа
      throw new Error('Сетевой ответ не был успешным ' + response.statusText);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Ошибка Fetch:', error));

9. Отправка данных формы

Вы можете использовать объект FormData для отправки данных формы на сервер:

Пример

const formData = new FormData();
formData.append('username', 'John');
formData.append('email', '[email protected]');

fetch('https://example.com/api/form', {
    method: 'POST',
    body: formData
})
.then(response => response.text())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Кросс-доменные запросы

Если требуются кросс-доменные запросы, вы можете настроить CORS (Cross-Origin Resource Sharing) на стороне сервера. На фронтенде вы также можете использовать опцию credentials, чтобы указать, отправлять ли учетные данные, такие как куки.

Пример

fetch('https://example.com/api', {
    method: 'GET',
    credentials: 'include' // Разрешить отправку куки при кросс-доменных запросах
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

Fetch и PHP

Использование AJAX-запросов в PHP по сути ничем не отличается от использования AJAX в других серверных языках. PHP-скрипты получают запросы, обрабатывают данные и возвращают ответы на стороне сервера.

Клиентский код JavaScript использует Fetch API для отправки запросов и обработки ответов.

Например, если у вас есть PHP-файл server.php, который получает GET-запрос и возвращает некоторые данные, вы можете использовать Fetch так:

Пример

fetch('server.php?query=123')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));

На стороне PHP вы разберёте параметры запроса и вернёте ответ:

Пример

<?php
// server.php
$queryString = $_SERVER['QUERY_STRING'];
parse_str($queryString, $params);
$responseData = array('status' => 'success', 'data' => $params);
echo json_encode($responseData);
?>

Таким образом, вы можете использовать Fetch API на стороне клиента для взаимодействия с серверной частью на PHP.

Другие расширения