The same POST API call in various JavaScript libraries

I was testing an API using Insomnia, a very cool application that lets you perform HTTP requests to REST API or GraphQL API services.

They have a nice button that generates code to replica an API request from the app, where you design all your request data visually.

Internally it uses https://github.com/Kong/httpsnippet which is an HTTP Request snippet generator for many languages & libraries, written in JavaScript. A very cool project.

Anyway, the export had several code snippets. I want to show the same API call in different libraries.

First, here’s the API call description. I make a POST request to the api.randomservice.com website (it’s a random URL I just came up with) to the /dog endpoint.

To this endpoint I send an object with 2 properties:

{
  name: 'Roger',
  age: 8
}

encoded as JSON.

I also pass a content-type to set the content as application/json and an authorization header to authenticate my request with a Bearer token I was assigned through the API dashboard.

XHR

The first code example is XHR, which we can use in the browser natively, and in Node.js using https://www.npmjs.com/package/xmlhttprequest:

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)

The Fetch API

Then we have the same code using the Fetch API, another API natively available in the browser and in Node.js using https://www.npmjs.com/package/node-fetch:

fetch('https://api.randomservice.com/dog', {
  method: 'POST',
  headers: {
    'content-type': 'application/json',
    authorization: 'Bearer 123abc456def'
  },
  body: {
    name: 'Roger',
    age: 8
  }
})
  .then(response => {
    console.log(response)
  })
  .catch(err => {
    console.log(err)
  })

The node HTTPS module

Next up, the native https Node.js module:

const http = 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 = http.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()

The request library

Here is the same using the request Node library:

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

Here is the same using Axios, a popular library for both Node and the browser:

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)
})