ajax operator in RxJS

The Ajax operator creates an observable for an ajax request. It is used to make API calls. We can perform all http request methods with this ajax operator. It converts a normal ajax call to an observable and emits the data as an observable.

An example of the ajax operator is given below.

const postsUrl = `https://jsonplaceholder.typicode.com/posts` ;
const posts = ajax(postsUrl);
const subscribe = posts.subscribe(
res => console.log(res),
err => console.error(err)
);

And the response of the above code without formatting in commented sequence will be:

/** AjaxResponse {originalEvent: ProgressEvent, xhr: XMLHttpRequest,
request: {…}, status: 200, responseType: "json", …}
originalEvent: ProgressEvent {isTrusted: true, lengthComputable: false,
loaded: 27520, total: 0, type: "load", …}
xhr: XMLHttpRequest {__zone_symbol__timeoutfalse: Array(1),
__zone_symbol__errorfalse: Array(1), __zone_symbol__ON_PROPERTYtimeout: ƒ,
__zone_symbol__ON_PROPERTYerror: ƒ,
__zone_symbol__ON_PROPERTYreadystatechange: ƒ, …}
request: {async: true, crossDomain: true, withCredentials: false, headers:
{…}, createXHR: ƒ, …}
status: 200
responseType: "json"
response: (100) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},
{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
__proto__: Object */

Since the ajax gives output in the form of an observable, we can subscribe to the output value emitted by the operator to get the data in JSON format which can be used in our application. So the code for getting the formatted JSON data through the ajax operator is given below.

const postsUrl = ` https://jsonplaceholder.typicode.com/posts ` ; // (1)
const posts = ajax.getJSON(postsUrl); // (2)
const subscribe = posts.subscribe( // (3)
res => console.log(res),
err => console.error(err)
);

In the first step, we set a url which we will hit to fetch the data. In the next step, we pass the url to the getJSON method which is a method part of the ajax operator . Then in the next step, we subscribe to the value so that when the data is fetched from the remote API, we print it. Please note that here we also have an error handler for the eventuality if any error occurs .

If for the ajax operator we want to send object to the remote API we will have to perform the below code.

const postsUrl = `https://jsonplaceholder.typicode.com/posts` ;
const posts = ajax({
url: postsUrl,
method: 'GET' ,
headers: {
'Content-Type' : 'application/json'
},
body: {
}
})
posts.subscribe(
res => console.log(res),
err => console.error(err)
);

Here we can see that with the ajax method, we are sending the url, the method, headers and a body object with the request.Other things remain the same for subscription and error handling.