Javascript API Concept

API: API stands for Application Programming Interface. An API is a set of defined rules that explain how computers and application servers communicate with each other. API can transfer data between an application and a web server.

REST API is an API that uses HTTP requests for communication with web services and must comply with certain constraints.

CRUD and types of requests: CRUD contains create, read, update, and delete actions that can be performed on a data source. In a REST API, these actions correspond to Four types of requests:

POST: Create action. Using this type of request, we can add new data to our server.
GET: Read action. This is the most common type of request. Using it, we can get the data we are interested in from those that the API is ready to share.
PUT: Update action. Changes existing information. Using this type of request, we can update/modify the value of our existing data.
DELETE: Delete action. Deletes existing information.

**GET vs POST:**

1. Get method is used to show data in the frontend and the post method is used to insert/update data.
2. In the get method, data is sent to the header and for that limited amount of data to send. On the other hand, in the post method data is sent to the body and for that large amount of data to be sent.
3. Get is not secured and post is secured because data is exposed in the url bar or not.
4. Get will ignore the second request until the first is required (idempotent). But post can not do it (non-idempotent).
5. Get is more efficient than post.

In JavaScript, it was really important to know how to make HTTP requests and retrieve the dynamic data from the server. JavaScript provides some built-in browser objects and some external open source libraries to interact with the APIs.

Here are the possible ways to make an API call:

• XMLHttpRequest
• fetch
• Axios
• jQuery

Today we will discuss about Fetch and Axios:

Fetch- allows us to make an HTTP request but with a straightforward interface by using promises. It’s not supported by old browsers, but very well supported among the modern ones. The fetch API is very powerful. The major disadvantage of fetch API is error handling. We can make an API call by using fetch in two ways.

JSONPlaceholder is a free online REST API that we can use whenever we need some fake data.

Method 1:

fetch('https://jsonplaceholder.typicode.com/users')
  .then(res => res.json())
  .then(users => console.log(users))

Method 2(using Async and Await):

const getUsers = async() => {
let res = await fetch('https://jsonplaceholder.typicode.com/users');
let data = await res.json();
console.log(data);
return data;
}

getUsers();

Axios- is an open-source library for making HTTP requests and provides many great features, and it works both in browsers and Node.js. It is a promise-based HTTP client that can be used in plain JavaScript and advanced frameworks like React, Vue.js, and Angular.

We can install axios package to using these command:

npm install axios
or
yarn add axios

Then, include it in HTML file like this:

<script src="./node_modules/axios/dist/axios.min.js"></script>

Or, the easiest way to include Axios is by using external CDN:

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

Let’s open our index.js file and create a function that will print some user information in the console by using Axios.

const getUsers = () => {
 axios.get('https://reqres.in/api/users')
 .then(res => {
  const users = res.data;
  console.log(‘GET users’, users);
})
 .catch(error => console.error(error));
};
getUsers();

The advantages of Axios-

1. Axios performs automatic transformations and returns the data in JSON format.
2. Better error handling
3. Axios has a wide range of supported browsers.