Javascript Api Call Cheatsheet

Javascript Api Call Cheatsheet

Below are the different types of API Calls you can perform in Javascript. You can use these methods to perform asyncrhonous api calls for fetch data from the specified URL.

  1. XML HTTP Request
  2. Fetch
  3. Axios
  4. jQuery Ajax


XML HTTP Request

All modern browsers support the XMLHttpRequest object to request data from a server. It works on the oldest browsers as well as on new ones. It was deprecated in ES6 but is still widely used.

var request = new XMLHttoRequest();
request.open('GET', 'https://jsonplaceholder.typicode.com/todos');
request.send();
request.onload = ()=› {
  console.log(JSON.parse(request.response));
}


Fetch

The Fetch API in Javascript provides an interface for fetching resources (including across the network) in an asynchronous manner. It returns a Promise. It is an object which contains a single value either a Response or an Error that occurred. The then() method tells the program what to do once Promise is completed.

fetch('https://jsonplaceholder.typicode.com/todos').then(response => {
  return response.json();
}).then(data => {
  console.log(data);
});


Axios

Axios is an open-source library for making HTTP requests. It works on both Browsers and Node js servers. It can be included in an HTML file using an external CDN. Axios also returns promises like fetch API.

‹script sre="https://cdn.jsdelivr.net/npm/axios/dist/axios.min. js"›‹/script› 

axios.get ("https://jsonplaceholder.typicode.com/todos").then(response =› {
  console.log(response.data);
});


jQuery AJAX

The jQuery.Axax() method performs asynchronous HTTP requests. Uses $. ajax() method to make the requests.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"›‹/script›

$(document).ready(function() {
    $.ajax({
        url: 'https://jsonplaceholder.typicode.com/todos',
        type: "GET"
        success: function (result) {
            console.log(result);
        }
    })
})


Happy Coding!

🔥 49 Views
Jul 3, 2023

How to create a folder in Docker

To create a folder in docker or a file create a directory for the build context and cd into it. You can use the classic mkdir command to create a folder in Docker.

🔥 11.8K Views
Apr 6, 2022

Create Directory if not Exists in DockerFile

To create a Directory that does not exist you have to use the --p command along with the mkdir command. Becausemkdir isn't recursive by default -- it expects the immediate parent directory to exist.

🔥 11.1K Views
Apr 6, 2022

Dockerfile mkdir permission denied

Docker Filesystems and Docker containers work in a similar manner to filesystems outside a Docker container. To provide users read/write/execute permissions use this command chmod 0777 /usr/local/docker/foo

🔥 7.9K Views
Apr 6, 2022

Async Await in Do While Loop

In this post, we are going to checkout Async Await in Do while loop with examples. Do while Loop in Typescript is same as the Do While Loop in Javascript.

🔥 2.8K Views
Sep 2, 2022

Create Canvas Dynamically in Angular

We can use Renderer API to create canvas dynamically in Angular which can be imported from angular/core package. Renderer API allows DOM maniplulation.

🔥 1.9K Views
Dec 10, 2022

Indian Currency Pipe in Angular

Indian currency pipe in Angular, Currency pipe angular without symbol, Angular Currency Pipe is one of the built in pipe in Angular used to format currency value according to given country code,currency,decimal,locale information.

🔥 895 Views
Aug 29, 2022

Adding a script to an Angular Library

Adding External Scripts in Angular Library or application. You can add external scripts in angular application on runtime using javascript with few lines of code.

🔥 868 Views
Mar 18, 2022

Repository is not clean. Please commit or stash any changes before updating

Repository is not clean. Please commit or stash any changes before updating. If you are getting such kind of Error use the --force flag along with the ng update command

🔥 813 Views
Apr 15, 2022

Docker mkdir permission denied Mac

Docker mkdir permission Failed ? For using data volumes in Docker by command-line and If your Docker host is on the Linux platform, you can find Docker volumes by /var/lib/docker/volumes path.

🔥 640 Views
Apr 7, 2022

Uninstall angular cli using yarn

To uninstall any package using yarn you have to use the "remove" keyword along with the package name. You can also add in "global" keyword to uninstall the package globally using yarn from your system.

🔥 514 Views
Dec 6, 2022