Как заменить AJAX на REST API в WordPress — Заметки разработчика

В мире WordPress разработки происходит постепенный переход от классического AJAX к более структурированному REST API. В этой статье мы разберем, как правильно заменить устаревший AJAX подход на современный REST API, с учетом обработки ID текущего пользователя.

🤔 Почему стоит переходить на REST API?

Стандартизация: REST API следует общепринятым стандартам HTTP
Безопасность: Встроенная система аутентификации и авторизации
Производительность: Более эффективная обработка запросов
Масштабируемость: Легко расширять и поддерживать код
Кэширование: Лучшая интеграция с системами кэширования

🛠️ Практическая реализация

1. Создаем кастомный REST endpoint

Добавьте следующий код в functions.php вашей темы или в файл плагина:

<?php
// Регистрируем кастомный REST маршрут
add_action('rest_api_init', 'register_custom_rest_routes');

function register_custom_rest_routes() {
    register_rest_route('my-plugin/v1', '/user-data/', array(
        'methods' => 'GET',
        'callback' => 'handle_user_data_request',
        'permission_callback' => 'check_user_permissions'
    ));

    // Для POST запросов
    register_rest_route('my-plugin/v1', '/user-data/', array(
        'methods' => 'POST',
        'callback' => 'handle_user_data_update',
        'permission_callback' => 'check_user_permissions'
    ));
}

// Проверяем права доступа
function check_user_permissions() {
    return is_user_logged_in();
}

// Обрабатываем GET запрос
function handle_user_data_request(WP_REST_Request $request) {
    $user_id = get_current_user_id();

    if (!$user_id) {
        return new WP_Error('unauthorized', 'Пользователь не авторизован', array('status' => 401));
    }

    // Ваша бизнес-логика здесь
    $user_data = array(
        'user_id' => $user_id,
        'display_name' => get_the_author_meta('display_name', $user_id),
        'user_email' => get_the_author_meta('user_email', $user_id),
        'timestamp' => current_time('timestamp')
    );

    return new WP_REST_Response($user_data, 200);
}

// Обрабатываем POST запрос
function handle_user_data_update(WP_REST_Request $request) {
    $user_id = get_current_user_id();
    $parameters = $request->get_json_params();

    // Обработка данных...

    return new WP_REST_Response(['success' => true, 'user_id' => $user_id], 200);
}

2. Подключаем скрипты и настраиваем фронтенд

<?php
// Подключаем необходимые скрипты
add_action('wp_enqueue_scripts', 'enqueue_rest_api_scripts');
add_action('admin_enqueue_scripts', 'enqueue_rest_api_scripts');

function enqueue_rest_api_scripts() {
    // Подключаем WordPress REST API клиент
    wp_enqueue_script('wp-api');

    // Подключаем наш кастомный скрипт
    wp_enqueue_script(
        'my-rest-handler',
        get_template_directory_uri() . '/js/my-rest-handler.js',
        array('jquery', 'wp-api'),
        '1.0.0',
        true
    );

    // Передаем настройки в JavaScript
    wp_localize_script('my-rest-handler', 'wpApiSettings', array(
        'root' => esc_url_raw(rest_url()),
        'nonce' => wp_create_nonce('wp_rest'),
        'current_user_id' => get_current_user_id()
    ));
}

3. JavaScript для работы с REST API

Создайте файл /js/my-rest-handler.js:

class RestAPIHandler {
    constructor() {
        this.namespace = 'my-plugin/v1';
        this.init();
    }

    init() {
        this.getUserData();
        this.setupEventListeners();
    }

    // GET запрос для получения данных пользователя
    async getUserData() {
        try {
            const response = await fetch(
                `${wpApiSettings.root}${this.namespace}/user-data/`,
                {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-WP-Nonce': wpApiSettings.nonce
                    }
                }
            );

            if (!response.ok) {
                throw new Error('Ошибка получения данных');
            }

            const data = await response.json();
            this.handleUserDataResponse(data);

        } catch (error) {
            console.error('REST API Error:', error);
            this.showError(error.message);
        }
    }

    // POST запрос для обновления данных
    async updateUserData(userData) {
        try {
            const response = await fetch(
                `${wpApiSettings.root}${this.namespace}/user-data/`,
                {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-WP-Nonce': wpApiSettings.nonce
                    },
                    body: JSON.stringify(userData)
                }
            );

            if (!response.ok) {
                throw new Error('Ошибка обновления данных');
            }

            const result = await response.json();
            this.handleUpdateResponse(result);

        } catch (error) {
            console.error('REST API Error:', error);
            this.showError(error.message);
        }
    }

    handleUserDataResponse(data) {
        console.log('Данные пользователя:', data);
        // Обрабатываем полученные данные
        if (data.user_id) {
            this.updateUI(data);
        }
    }

    handleUpdateResponse(result) {
        if (result.success) {
            this.showSuccess('Данные успешно обновлены');
        }
    }

    updateUI(userData) {
        // Обновляем интерфейс на основе полученных данных
        const userInfoElement = document.getElementById('user-info');
        if (userInfoElement) {
            userInfoElement.innerHTML = `
                <p>ID пользователя: ${userData.user_id}</p>
                <p>Имя: ${userData.display_name}</p>
                <p>Email: ${userData.user_email}</p>
            `;
        }
    }

    setupEventListeners() {
        // Навешиваем обработчики событий
        const updateButton = document.getElementById('update-user-data');
        if (updateButton) {
            updateButton.addEventListener('click', () => {
                this.updateUserData({
                    custom_field: 'новое значение'
                });
            });
        }
    }

    showError(message) {
        // Показываем сообщение об ошибке
        console.error('Error:', message);
    }

    showSuccess(message) {
        // Показываем сообщение об успехе
        console.log('Success:', message);
    }
}

// Инициализируем когда DOM загружен
document.addEventListener('DOMContentLoaded', () => {
    new RestAPIHandler();
});

🔄 Сравнение с классическим AJAX подходом

Старый AJAX подход:

// PHP
add_action('wp_ajax_my_action', 'my_ajax_handler');
add_action('wp_ajax_nopriv_my_action', 'my_ajax_handler');

function my_ajax_handler() {
    $user_id = get_current_user_id();
    // обработка...
    wp_die();
}

// JavaScript
jQuery.ajax({
    url: ajaxurl,
    type: 'POST',
    data: {
        action: 'my_action',
        nonce: my_ajax.nonce
    }
});

Новый REST API подход:

// PHP - более структурированно
register_rest_route('namespace/v1', '/endpoint/', array(
    'methods' => 'GET',
    'callback' => 'rest_handler',
    'permission_callback' => 'check_permissions'
));

// JavaScript - современный синтаксис
fetch(`${wpApiSettings.root}namespace/v1/endpoint/`, {
    headers: {
        'X-WP-Nonce': wpApiSettings.nonce
    }
});

🛡️ Безопасность и лучшие практики

Всегда используйте permission_callback
Проверяйте nonce в каждом запросе
Валидируйте и санитизируйте входные данные
Используйте соответствующие HTTP методы
Обрабатывайте ошибки на фронтенде и бэкенде

💡 Заключение

Переход с AJAX на REST API в WordPress — это важный шаг к созданию более современных, безопасных и масштабируемых веб-приложений. REST API предоставляет стандартизированный подход к обработке данных, улучшенную систему безопасности и лучшую интеграцию с современными фронтенд-фреймворками.

Использование ID текущего пользователя в REST API становится более предсказуемым и безопасным, поскольку система авторизации встроена непосредственно в архитектуру REST API WordPress.

Начните использовать REST API в своих проектах уже сегодня — это инвестиция в качество и поддерживаемость вашего кода!