JavaScript Requests

In JavaScript, there are many different ways to send the request to a server or database from the front end of an application. Here’s a quick reference to all the methods to send a request using JavaScript.

These are the following approaches to creating a request:

JavaScript XMLHttpRequest

It is an object that is used to send the HTTP request to a server or API in JavaScript. It was widely used before the introduction of ES6.

Syntax:

const xhr = new XMLHttpRequest();
xhr.open('request_type', 'api_address', 'true');
xhr.send();
xhr.onload = () => {}

Parameters:

• request_type: It specifies the type of request to be sent to the server. It can be POST or GET.
• api_address: It is the URL of the server to which the specified request will be sent.
• true/false: true specifies the request is asynchronous while false specifies the request is synchronous.

Return Value:

It returns the required data if the request is of GET type.

Note: you need to install XMLHttpRequest to run this code, for that, you have to run this command in your terminal:

npm i  XMLHttpRequest 

Example: The below code illustrates how you can use the XMLHttpRequest object to send the request.

Javascript

const xhr = new XMLHttpRequest();
xhr.open('GET', 'api_address', true);
xhr.send();
xhr.onload = () => {
    if (xhr.status === 200) {
      const response = JSON.parse(xhr.response);
  } else {
      // Handle error
  }
}

JavaScript fetch() API

The JavaScript fetch() api can also be used to send requsets to the server to get or post the data. By default, It will send the GET request if no request type is passed.

Syntax:

fetch('api_address', 'request_type').then().then().catch();

Example: The below example implements the fetch() api to send the api request.

Javascript

fetch('api_address')
.then((response)=>{
    if(response.ok){
        return response.json();
    }
    else{
        throw new Error('Something went wrong!');
    }
})
.then((data)=>{
    console.log(data);
})
.catch((error)=>{
    console.error(error);
});

JavaScript Axios

Axios is another method of sending the request to the server. It can be easily installed using the npm command “npm install axios”. It is used with the JavaScript libraries or frameworks like React. There is no need to specify GET or POST request types because it uses get() and post() methods for the corresponding request.

Syntax:

axios.get('api_address').then().catch();

Example: The below example uses the axios to send the request in JavaScript.

Javascript

import axios from 'axios';

axios.get('api_address')
.then((response)=>{
    const result = response.data;
})
.catch((error)=>{
    console.error(error);
});

JavaScript Async Await

Async Await is a method to send the requests without using the callback functions, instead make the requests to wait until the first step completes.

Syntax:

async function func_name(){
    try{
        // Call api using await
    }
    catch(error){
        // Handle Errors
    }
}

Example: The below example will explain the use of async await to send the request.

Javascript

async function fetchDataUsingAsyncAwait(){
    try{
        const api_data = await fetch('api_URL');
        const api_json_data = await response.json();
    }
    catch(error){
        console.error(error);
    }
}

fetchDataUsingAsyncAwait();