MAKING API REQUEST WITH JAVASCRIPT

Arisekola177 — Fri, 24 Mar 2023 22:38:11 +0000

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 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.

MAKING API REQUEST WITH JAVASCRIPT.

Arisekola177 — Fri, 24 Mar 2023 09:50:36 +0000

Hello developers! In this post, we’ll discuss various methods to request an API for your next project.

In the chapter 1 of this post, we’ll discuss what APIs means, it’s categories and types.

Then in the chapter 2, we’ll discuss various methods in making API calls with JavaScript.

WHAT ARE APIs???

API stands for Application Programming Interface. An API is a set of protocols, routines and tools for building software application. In essence, an API specifies how software components should interact with each other.

They are commonly used to access web-based services and databases.

APIs can be public or private. Public APIs are available to developers and users outside of the organization that developed the API, while private APIs are designed for internal use only.

APIs are often categorized by the way they are accessed such as RESTful APIs, which are accessed using HTTP requests, or SOAP APIs, which use XML to communicate.

We will only discuss RESTful APIs in this post due to modern usage.

WHAT ARE RESTful APIs

A RESTful API is a type of API that uses HTTP request to perform create, read, update and delete(CRUD) operations on resources.

RESTful API is an interface that two computer systems use to exchange information securely over the internet. Most business applications have to communicate with other internal and third-party applications to perform various tasks.

REST stands for Representational state transfer, which is a set of architectural principles to building web services.

In a RESTful API each resources is identified by a unique URL and HTTP methods such as GET, POST, PUT and DELETE are used to interact with the resources. For example, a GET request to a URL that represents a customer resource might return information about that customer, while a POST request to the same URL might create a new customer.

In addition, RESTful APIs of teen use standard HTTP status codes to indicate the success of failure of a request. For example, a 200 status code indicate a successful request, while a 404 status code indicates that the requested resource was not found.

TYPES

There are several types of RESTful APIs, including:

Hypermedia APIs which uses APIs such as links and other navigational elements to allow clients to discover and navigate the APIs resources.
Search-bases APIs which allow clients to search for resources based on various criteria. They typically provide a search endpoint that accept query parameters and returns a set of results based on the search criteria.

Others are:

Paginated APIs
Streaming APIs
File-based APIs
CRUD-based APIs

Thanks so much for your time. The chapter 2 will be posted as soon as possible.

DEV Community: Arisekola177

MAKING API REQUEST WITH JAVASCRIPT

MAKING API REQUEST WITH JAVASCRIPT.