HOW TO MAKE HTTP REQUEST

JavaScript has great modules and methods to make HTTP requests that can be used to send or receive data from a server side resource. There are few popular ways to make HTTP requests in JavaScript.

Ajax

Ajax is the traditional way to make an asynchronous HTTP request. Data can be sent using the HTTP POST method and receiving using the HTTP GET method. Let’s take look and make a GET request. I’ll be using JSON Placeholder, a free online REST API for developers that return random data in JSON format.
To make an HTTP call in Ajax, you need to initialize a new XMLHHttpRequest() method, specify the URL endpoint and HTTP method (in this case GET). Finally we use the open() method to tie the HTTP method and URL endpoint together and call the send() method to fire off the request.
We log the HTTP response to the console by using the XMLHTTPRequest.onreadystatechange property which contains the event handler to be called when the readystatechanged event is called.

const Http = XMLHttpRequest();
const url = ‘https://jsonplaceholder.typicode.com/posts’;
Http.open(“GET”, url);
Http.send();
Http.onreadystatechange = (e) => { console.log(Http.responseText)}

If viewed on the browser console, it will return an array of data in JSON format. But how would we know if the request is done?
The onreadystatechange property has 2 methods, readyState and statuswhich allow us to check the state of our request.

const Http = XMLHttpRequest();
const url = ‘https://jsonplaceholder.typicode.com/posts’;
Http.open(“GET”, url);
Http.send();
Http.onreadystatechange = (e) => { 
   If (this.readyState === 4 && this.status === 200){
   console.log(Http.responseText)
   }
}

fetch

fetch is a new powerful web API that let us make asynchronous requests. In fact, fetch is one the best and my favorite way to make an HTTP request. It returns a “Promise” which is one of the great features of ES6. Promises allow us to handle the asynchronous request in a smarter way. Let’s look at how fetch technically works.

const url = ‘https://jsonplaceholder.typicode.com/posts’;
fetch(url)
.then(data => data.json())
.then(res => console.log(res))

The fetch function takes one required parameter: the endpoint URL. It also has other optional parameters as in the example below

const url = ‘https://jsonplaceholder.typicode.com/posts’;
const data = {
   name: “sam”,
   id:12
}
const otherParam = {
    headers: {
        “content-type”:”application/json; charaset=UTF-8”
    }
    body: data,
    method:”POST”
} 
fetch(url, otherParam)
.then(data => data.json())
.then(res => console.log(res))
.catch(err=> console.log(err))

As you can see, fetch has many advantages for making HTTP requests.

Axios

Axios is an open source library for making HTTP requests and provides many great features. Let’s have a look at how it works.

Useage

First, you’d have to include Axios. There are 2 ways to include Axios in your project.
First, you can use npm:

npm install axios

Then you’d need to import it

import axios from ‘axios’

secondly, you can include axios using a CDN

<script src=”https://unpkg.com/axios/dist/axios.min.js”></script>

Useage

With Axios you can use GET and POST to retrieve and post data from the saver.

GET:

const url = ‘https://jsonplaceholder.typicode.com/posts’;
axios.get(url)
.then(data => console.log(data))
.catch(err => console.log(err))

const url = ‘https://jsonplaceholder.typicode.com/posts’;
const data = {
name: “sam”,
id:12
}
const param = {
    name: “sam”,
    id: 34
} 
Axios.get(url, param)
.then(data => data.json())
.catch(err=> console.log(err))

axios takes one required parameter, and can take a second optional parameter too.

POST:

const url = ‘https://jsonplaceholder.typicode.com/posts’;
const user = {
name: “sam”,
id:12
}

axios({
method: “post”,
url: url’
data: {
    user
}
})
.then(data => console.log(data))
.catch(err => console.log(err))