DEV Community

alelee93
alelee93

Posted on

JavaScript Fetch API

The foundational languages of websites are HTML, CSS, and Javascript.

If we were to compare a website to a house, then
HTML (Hypertext Markup Language) would be the concrete blocks making up the house and providing it with a stable structure.
CSS (Cascading Style Sheets) would be the color and molding of the house, enriching its space through eye-catching design.
And finally JAVASCRIPT would be the electrical wires of the house that bring it to life.

This post will focus on Javascript, and more specifically, the Javascript “FETCH API”

Before we begin, let’s take a slightly deeper look at Javascript.

Javascript is a programming language initially designed to interact with elements of web pages. When a web page is loaded, once the HTML and CSS have been downloaded, the Javascript in the web browser executes the JavaScript code. The JavaScript code then modifies the HTML and CSS to dynamically update the user interface.

Ok so why is the FETCH API important? What does it do?

The fetch API is important because it allows us to make HTTP requests to servers from web browsers.

How does it work?

WE START BY SENDING A REQUEST
The fetch() method requires one parameter to work, which is the URL of the resource that you want to fetch.

WE GET BACK A PROMISE
The fetch method returns a Promise containing the response.

WE HANDLE THE PROMISE
You can use the then() and catch() methods to handle the promise

THE RESOURCE IS AVAILABLE
When the request completes, the resource is available and the Promise resolves into a Response object.

here is an example of a fetch request:

getTopics = () => fetch(this.root+"/topics").then(res => res.json())

Top comments (0)