MAKING API REQUEST WITH JAVASCRIPT

Hello developers!!!!!

This is the concluding part of my earlier post.

In the earlier post, we discussed what APIs are, categories and also types of RESTful APIs.

We will be discussing different methods of requesting APIs in this concluding part.

• XHR

XHR stands for XMLHttpRequest, which is a JavaScript API used to make asynchronous HTTP requests to a server.

XHRs (XMLHttpRequests) are the oldest and have been used for many years to make HTTP requests from
JavaScript. They are powerful and can be used for a wide range of purposes, but can be more difficult to use than newer APIs.

XHRs allow web developers to update parts of a web page without requiring a full page reload. This is known as AJAX (Asynchronous JavaScript and XML) and enables more dynamic and responsive user interfaces.
To make an XHR request, a developer creates a new XMLHttpRequest object, sets the request method (e.g. GET or POST), the URL of the resource to be accessed, and any additional parameters such as request headers or data to be sent. Then, the request is sent using the send) method of the XHR object.
Once the server sends a response, the XHR object's “onload” method is called with the response data, which can then be processed and used to update the page.
XHRs are often used in web applications to fetch data from a server without requiring a full page refresh, and can be used in conjunction with other web technologies such as JavaScript frameworks and APIs to create dynamic and responsive user interfaces.

• How to make API request with XHR.

const req = new XMLHttpRequest();

req.onload = function (){
      const data =
          JSON.parse(this)
      console.log(data)
    };

     req.onerror = function (){
           console.log(“ERROR!!”)
           console.log(this)
          };

 req.open("GET", "https://swapi.dev/api/people");
 req.send();

• The second method of making an API call is with fetch.

Fetch is a modern JavaScript API used to make asynchronous HTTP requests to a server. Fetch is a newer alternative to the uolder XMLHttpRequest (XHR) API and is designed to be more flexible and easier to use.

Fetch is a newer API that is designed to be more flexible and easier to use than XHRs.
Fetch provides a simple and consistent
API for making HTTP requests, and includes modern features such as support for Promises and streaming responses.

To make a fetch request, a developer creates a new 'Request object with the URL of the resource to be accessed and any additional parameters such as request headers or data to be sent. Then, the fetch() method is called with the 'Request object as an argument.
Once the server sends a response, the
'fetch() method returns a Promise object representing the response. This Promise object can then be used to access the response data and any relevant metadata such as the response headers.
One of the key benefits of fetch is that it supports modern features such as CORS
(Cross-Origin Resource Sharing) out of the box, making it easier to access resources on different domains.
Fetch also supports streaming responses and the ability to abort requests, and can be used in conjunction with other web technologies such as JavaScript frameworks and APls to create dynamic and responsive user interfaces.

• How to make an API request with fetch.

const starWarsPeople = async()=> {
  try{
  const res = await fetch(‘https://swapi.dev/api/people’);

 const data = await res.json();

 console.log(res.data)
} catch(e){
  console.log(‘Error!!!’,e)
 }
};

starWarsPeople();

• The last method we will be discussing is axios.

Axios is a popular JavaScript library used to make HTTP requests from a web browser or
Node.js server. Axios provides a simple and powerful API for making HTTP requests, and is designed to be easy to use and highly configurable.

Axios supports a wide range of HTTP request methods such as GET, POST, PUT, DELETE, and PATCH, and also provides a range of options for customizing request headers and handling responses.
To make a request with Axios, a developer creates a new instance of the Axios library and then calls one of its methods (such as
"get ()", post ()", etc.) with the URL of the resource to be accessed and any additional parameters such as request headers or data to be sent. Once the server sends a response, Axios returns a 'Promise" object representing the response, which can then be used to access the response data and any relevant metadata such as the response headers.
Axios also includes features such as automatic transformation of request and response data, support for request and response interceptors, and support for canceling requests. These features make it a powerful and flexible library for making HTTP requests in modern web applications.
Overall, Axios is a widely used and highly regarded library for making HTTP requests in JavaScript-based applications, due to its simplicity, flexibility, and ease of use.

• Making request with axios.

The below cdn should be included in the HTML file in the script tag.

<script src = “https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js”><script>.

const getStarWarsPerson = async () => {
   try{
   const res = await axios.get(‘https://swapi.dev/api/people’);
   console.log(res.data)
  } catch(e){
    console.log (‘Error!!!’, e);
  }
 };

getStarWarsPerson();

-WRAP UP!!!!

Thank you for your time.