Варіанти надсилання запитів

Спілкуватися із REST API, тобто. надсилати до нього запити та отримувати відповіді можна різними способами. Власне цим він і зручний і для цього створений. По суті, тут немає жодних обмежень: будь-яка програма, яка вміє надсилати запити, може керувати сайтом віддалено. Або це можна робити із самого сайту, у цьому випадку будуть створюватися AJAX запити до REST API.

У цьому розділі ми наведемо кілька прикладів коду, як можна надсилати запити до REST API.

Тут відразу потрібно розділити запити сайту до себе і запити одного сайту або додаток до іншого сайту. Багато в чому ці запити схожі, мабуть, найголовніша відмінність в них – це авторизація: коли запит надсилає самому собі, то авторизація, як правило, не потрібна, а коли віддалено до сайту, то авторизацію потрібно проходити окремо, детальніше про це читайте в розділі Аутентифікація в REST API .

Як зробити внутрішній запит REST API з плагіна?

Це можна зробити за допомогою функції rest_do_request() . Вона створює запит до API усередині WordPress, тобто. технічно запиту не відбувається:

$request = new WP_REST_Request( 'GET', '/wp/v2/posts' );
// Встановимо параметри запиту
$request->set_param( 'per_page', 20 );
$ Response = rest_do_request ($ Request);

Запит за допомогою Fetch до JavaScript

Fetch – це веб-api, який має замінити оригінальний метод XMLHTTPRequests для роботи з AJAX і HTTP запитами. Fetch підтримується в останніх версіях сучасних браузерів : див. поліфіл за цим посиланням , якщо він потрібен.

var apiURL = 'http://demo.wp-api.org/wp-json';

// Отримаємо останні записи
fetch( apiURL + '/wp/v2/posts/' )
	.then(response => {
		if ( response.status !== 200 ) {
			throw new Error( 'Problem! Status Code: ' + response.status );
		}
		response.json().then( posts => {
			console.log(posts); // Виведемо в консоль
		});
	})
	.catch(function(err) {
		console.log('Error:', err);
	});

// Отримаємо запис з ID=1
fetch( apiURL + '/wp/v2/posts/1' )
	.then(response => {
		if ( response.status !== 200 ) {
			throw new Error('Problem! Status Code:' + response.status);
		}
		response.json().then( post => {
			console.log(post);
		});
	})
	.catch(function( err ) {
		console.error(err);
	});

Спочатку ми встановлюємо змінну apiURL , де міститься шлях до кореня REST API, щоб використовувати її в коді.

В обох прикладах спочатку викидаємо помилку (throw), якщо статус відповіді не 200. Якщо помилки немає, то перетворюємо відповідь на json та обробляємо її.

Насамкінець ловимо за допомогою .catch() будь-які викинуті нами помилки.

Запит на jQuery AJAX

Приклад JS-коду на основі jQuery.

(function($) {

	var apiURL = 'http://demo.wp-api.org/wp-json';

	// Отримаємо останні записи
	$.ajax( {
		url: apiURL + '/wp/v2/posts/',
		success: function ( posts ) {
			console.log('Array of posts', posts);
		},
		error: function( err ) {
			console.log('Error:', err);
		}
	} );

	// Отримаємо запис з ID=1
	$.ajax( {
		url: apiURL + '/wp/v2/posts/1',
		success: function (post) {
			console.log( 'Array of posts', post);
		},
		error: function( err ) {
			console.log('Error:', err);
		}
	});

}) (jQuery);

Спочатку ми встановлюємо змінну apiURL , де міститься шлях до кореня REST API, щоб використовувати її в коді.

$.ajax автоматично перетворює JSON відповідь на масив або об’єкт JavaScript. Тому тут не потрібні додаткові перетворення, можна відразу працювати з відповіддю, як це об’єкт або масив JavaScript.