Options for Sending Requests

You can communicate with the REST API, i.e., send requests to it and receive responses, in various ways. This is precisely what makes it convenient and what it was created for. Essentially, there are no restrictions here: any program that can send requests can manage the site remotely. Alternatively, this can be done from the site itself, in which case AJAX requests will be created to the REST API.

In this section, we will provide several different code examples on how to send requests to the REST API.

Here, we need to immediately distinguish between requests from the site to itself and requests from one site or application to another site. In many ways, these requests are similar; perhaps the most important difference between them is authorization: when a request is sent to itself, authorization is usually not needed, while when sending remotely to another site, authorization must be completed separately. Read more about this in the section Authentication in REST API.

How to Make an Internal Request to the REST API from a Plugin?

This can be done using the function rest_do_request(). It creates a request to the API within WordPress, i.e., technically no request occurs:

$request = new WP_REST_Request( 'GET', '/wp/v2/posts' );
// Set request parameters
$request->set_param( 'per_page', 20 );
$response = rest_do_request( $request );

Request Using Fetch in JavaScript

Fetch is a web API designed to replace the original XMLHTTPRequests method for working with AJAX and HTTP requests. Fetch is supported in the latest versions of modern browsers: see the polyfill at this link if needed.

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

// Get the latest posts
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 ); // output to console
		});
	})
	.catch(function(err) {
		console.log( 'Error: ', err );
	});

// Get the post with 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 );
	});

First, we set the variable apiURL, which contains the path to the root of the REST API, to use it later in the code.

In both examples, we first throw an error (throw) if the response status is not 200. If there is no error, we convert the response to JSON and process it.

In the end, we catch any errors we threw using .catch().

Request Using jQuery AJAX

Example JS code based on jQuery.

(function($) {

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

	// Get the latest posts
	$.ajax( {
		url: apiURL + '/wp/v2/posts/',
		success: function ( posts ) {
			console.log( 'Array of posts', posts );
		},
		error:  function( err ) {
			console.log( 'Error: ', err );
		}
	} );

	// Get the post with 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 );

First, we set the variable apiURL, which contains the path to the root of the REST API, to use it later in the code.

$.ajax automatically converts the JSON response into a JavaScript array or object. Therefore, no additional conversions are needed here; you can immediately work with the response as if it were a JavaScript object or array.