HOW TO MAKE HTTP REQUEST
Published: 2023-07-08 04:40:03

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 `status`which 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))
```