/

Same POST API call in different JavaScript libraries

Same POST API call in different JavaScript libraries

When testing APIs, it’s common to use tools like Insomnia to perform HTTP requests to REST API or GraphQL API services. In this blog, I want to showcase the same API call implemented in different JavaScript libraries.

API Call Description

Let’s consider an example API call - a POST request to the api.randomservice.com website’s /dog endpoint. The request body includes an object with two properties: name and age, encoded as JSON. Additionally, the request needs a content-type header set to application/json and an authorization header with a Bearer token for authentication.

Now, let’s explore how this API call can be implemented in various JavaScript libraries.

XHR

The first library we’ll cover is XHR. This library can be used in the browser natively or in Node.js with the help of the xmlhttprequest package. Here’s an example of the API call using XHR:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const data = JSON.stringify({
  name: 'Roger',
  age: 8
});

const xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener('readystatechange', function() {
  if (this.readyState === this.DONE) {
    console.log(this.responseText);
  }
});

xhr.open('POST', 'https://api.randomservice.com/dog');
xhr.setRequestHeader('content-type', 'application/json');
xhr.setRequestHeader('authorization', 'Bearer 123abc456def');

xhr.send(data);

Fetch API

The Fetch API is another native JavaScript library that can be used in the browser and in Node.js with the help of the node-fetch package. Here’s the API call implemented using the Fetch API:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
fetch('https://api.randomservice.com/dog', {
  method: 'POST',
  headers: {
    'content-type': 'application/json',
    authorization: 'Bearer 123abc456def'
  },
  body: JSON.stringify({
    name: 'Roger',
    age: 8
  })
})
  .then(response => {
    console.log(response);
  })
  .catch(err => {
    console.log(err);
  });

node HTTPS module

The native https module in Node.js can also be used to make the API call. Here’s an example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
const https = require('https');

const options = {
  method: 'POST',
  hostname: 'api.randomservice.com',
  port: null,
  path: '/dog',
  headers: {
    'content-type': 'application/json',
    authorization: 'Bearer 123abc456def',
    'content-length': '32'
  }
};

const req = https.request(options, res => {
  const chunks = [];

  res.on('data', chunk => {
    chunks.push(chunk);
  });

  res.on('end', () => {
    const body = Buffer.concat(chunks);
    console.log(body.toString());
  });
});

req.write(JSON.stringify({ name: 'Roger', age: 8 }));
req.end();

request library

The request library is another popular choice for making API calls in Node.js. Here’s how the API call can be implemented using the request library:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const request = require('request');

const options = {
  method: 'POST',
  url: 'https://api.randomservice.com/dog',
  headers: {
    'content-type': 'application/json',
    authorization: 'Bearer 123abc456def'
  },
  body: { name: 'Roger', age: 8 },
  json: true
};

request(options, (error, response, body) => {
  if (error) throw new Error(error);

  console.log(body);
});

Axios

Finally, let’s explore how the API call can be made using the popular Axios library, which works in both Node.js and the browser:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const axios = require('axios');

axios.post('https://api.randomservice.com/dog', {
  name: 'Roger',
  age: 8
}, {
  headers: {
    'content-type': 'application/json',
    authorization: 'Bearer 123abc456def'
  }
})
  .then((res) => {
    console.log(res.data);
  })
  .catch((error) => {
    console.error(error);
  });

tags: [“API”, “JavaScript libraries”, “XHR”, “Fetch API”, “node HTTPS module”, “request library”, “Axios”]