Замена AJAX на Fetch API в WordPress Gutenberg

Почему стоит заменить AJAX на Fetch API в Gutenberg блоках

В WordPress традиционно для взаимодействия фронтенда с сервером используют AJAX-запросы на базе jQuery. Однако с ростом популярности современного JavaScript и стандартов браузеров Fetch API становится более удобным и мощным инструментом для работы с сетевыми запросами.

Fetch API предлагает более чистый и понятный синтаксис, поддержку Promise и улучшенную обработку ошибок. Кроме того, он позволяет отказаться от зависимости от jQuery, что ускоряет загрузку страниц и снижает вес скриптов.

В Gutenberg блоках, которые построены на React, использование Fetch API органично вписывается в архитектуру и позволяет писать более современный и читаемый код.

Как организовать вызовы Fetch API в Gutenberg блоках

Для начала важно помнить, что все AJAX-запросы в WordPress должны проходить через endpoint admin-ajax.php или REST API. В Gutenberg рекомендуется использовать REST API, но для примера мы покажем, как заменить AJAX-запросы на Fetch в admin-ajax.php.

В JavaScript коде блока вместо привычного jQuery.ajax используем функцию fetch:

fetch(ajaxurl, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
  },
  body: new URLSearchParams({
    action: 'wpboot_my_action',
    param1: 'value1'
  })
})
.then(response => response.json())
.then(data => {
  console.log('Ответ сервера:', data);
})
.catch(error => {
  console.error('Ошибка запроса:', error);
});

Обратите внимание, что для POST-запросов мы используем заголовок Content-Type и тело запроса формируем с помощью URLSearchParams, чтобы сервер корректно распознал данные.

Пример PHP-обработчика в functions.php

Для обработки запроса создадим функцию с префиксом wpboot_ и подключим её к AJAX-хукам:

add_action('wp_ajax_wpboot_my_action', 'wpboot_my_action_callback');
add_action('wp_ajax_nopriv_wpboot_my_action', 'wpboot_my_action_callback');

function wpboot_my_action_callback() {
    $param1 = isset($_POST['param1']) ? sanitize_text_field($_POST['param1']) : '';
    // Логика обработки запроса
    $result = [
        'success' => true,
        'received' => $param1,
        'message' => 'Запрос обработан успешно'
    ];
    wp_send_json($result);
}

Практические рекомендации по переходу с AJAX на Fetch в Gutenberg

1. Откажитесь от jQuery, если он не нужен. В Gutenberg блоках React и Fetch API позволяют обойтись без jQuery, что упрощает код и уменьшает нагрузку на сайт.

2. Используйте REST API, если возможно. REST API более гибкий и масштабируемый, однако если нужно быстро переделать существующий AJAX, Fetch API прекрасно подойдёт.

3. Обрабатывайте ошибки и статусы ответа. Fetch API не считает HTTP ошибки (например, 404) ошибками Promise, поэтому проверяйте response.ok перед обработкой данных.

fetch(ajaxurl, {...})
.then(response => {
  if (!response.ok) {
    throw new Error('Сетевая ошибка: ' + response.status);
  }
  return response.json();
})
.then(data => {...})
.catch(error => {...});

4. Безопасность. Не забывайте использовать wp_nonce_field и проверять нонсы на сервере для защиты от CSRF-атак.

Пример интеграции Fetch API с nonce в Gutenberg блоке

В PHP добавим генерацию nonce и локализацию скрипта:

function wpboot_enqueue_block_assets() {
  wp_enqueue_script('wpboot-block-script', get_template_directory_uri() . '/js/block.js', ['wp-element'], null, true);
  wp_localize_script('wpboot-block-script', 'wpbootData', [
    'ajaxurl' => admin_url('admin-ajax.php'),
    'nonce' => wp_create_nonce('wpboot_nonce')
  ]);
}
add_action('enqueue_block_editor_assets', 'wpboot_enqueue_block_assets');

В JS используем nonce в заголовках:

fetch(wpbootData.ajaxurl, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
    'X-WP-Nonce': wpbootData.nonce
  },
  body: new URLSearchParams({
    action: 'wpboot_my_action',
    param1: 'value1'
  })
})
.then(response => {
  if (!response.ok) {
    throw new Error('Ошибка сети: ' + response.status);
  }
  return response.json();
})
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error(error);
});

В PHP проверяем nonce:

function wpboot_my_action_callback() {
  check_ajax_referer('wpboot_nonce', 'security');
  // обработка запроса
}

Полезные плагины для работы с AJAX и Fetch в WordPress

Хотя Fetch API сокращает необходимость в некоторых плагинах, для упрощения работы с AJAX и REST API можно использовать:

• REST API Plugin — расширяет возможности REST API в WordPress.
• Clearfy Pro — оптимизация и очистка WordPress, включая улучшение AJAX-запросов.

Использование современных технологий и правильная организация запросов существенно повышают производительность и устойчивость ваших Gutenberg блоков.