Варианты отправки запросов

Общаться с 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.