DEV Community

jC-blip-ux
jC-blip-ux

Posted on

What is a Web API in JS?

A Web API is an ultimate developer goal which can help increase the functionality of the browser, making it more efficient and friendly in its own kind.
The most complex functions and readability can be managed by simplifying with the use of API's.
Easy syntax can be brought into consideration, as it has been a task to work upon complex code.

An API?
API stands for Application Programming Interface.
It can be considered to be part of either a Web, Browser or Server as mentioned can provide the functionality to a web browser.

A Web API is an application programming interface for the Web.

A Browser API can extend the functionality of a web browser.

A Server API can extend the functionality of a web server.

Third Party APIs
Third party APIs are not built into your browser. These are also used as an extension and can be downloaded from the web of an already existing platform supporting API's

To use these APIs, you will have to download the code from the Web.

Examples:

YouTube API - Allows you to display videos on a web site.
Twitter API - Allows you to display Tweets on a web site.
Facebook API - Allows you to display Facebook info on a web site.

To fetch an API from a file
We can come across this with an example, given below:

A Fetch API Example
The example below fetches a file and displays the content:

Example:

fetch(file)
.then(x => x.text())
.then(y => myDisplay(y));
Enter fullscreen mode Exit fullscreen mode

Since Fetch is based on async and await, the example above might be easier to understand like this:

Example:

async function getText(file) {
  let x = await fetch(file);
  let y = await x.text();
  myDisplay(y);
}
Enter fullscreen mode Exit fullscreen mode

Or even bettter: Use understandable names instead of x and y:

Example:

async function getText(file) {
  let myObject = await fetch(file);
  let myText = await myObject.text();
  myDisplay(myText);
}
Enter fullscreen mode Exit fullscreen mode

We can also add API's from our own History!

The Web History API provides easy methods to access the windows.history object.

The window.history object contains the URLs (Web Sites) visited by the user.

The History back() Method

The back() method loads the previous URL in the windows.history list.

the "back arrow" in your browser can also be used as an alternative.

Example:

<button onclick="myFunction()">Go Back</button>

<script>
function myFunction() {
  window.history.back();
}
</script>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)