JavaScript: a game of fetch

You have heard about its many names — LiveScript, Jscript, ECMAScript, ES. You hear about JavaScript all the time. You hear how it’s this dynamic language that descended on the mind of Brendan Eich in 1995 and since then has permeated the atmosphere of programming interactive web apps that change the world! You hear how its this powerful and ambiguous language that can effectuate world domination if yielded by the right environment but the wrong fingers! You think to yourself; world domination would be incredible right? Mwahaha!

Photo by Luke Jernejcic on Unsplash

So, you take a stab at this JavaScript thing.

Now I’m not saying that I have intentions to dominate the world (for the sake of the FBI agent watching me as I type this) but I do intend to highlight the magnitude of JavaScript in modern day web programming (don’t arrest me).

JavaScript is a programming language that allows for the invocation of complex features on web pages. It is sometimes even referred to as the “verbs of the web”; being responsible for the action features of a web page. When you double tap on that cliched high-definition photo of your friend’s Starbucks Macchiato on Instragram and that familiar red heart pops up out of nowhere. Or when you’re shopping online at your favorite clothing store (Pac Sun) and an email pops up for you to subscribe for updates to get a 15% discount. First off, that’s JavaScript! Secondly, you type in your email and you subscribe to get 15% on car insurance! Wait…that’s Geico. The point is JavaScript is an essential part of producing dynamic web pages and being built on HTML and CSS — an important part of the web. The basic concepts of JavaScript include:

• Variables
• Fetch
• Constants
• Data Types
• Arrays
• Functions
• Conditional Statements
• Loops
• Switch Case

“If you just communicate, you can get by. But if you communicate skillfully, you can work miracles.” — Jim Rohn

So…what exactly is fetch?

Now if you’re a little like me when you hear the word “fetch”, you automatically whip your head to the left and right looking ecstatically for the ball headed your way, right? Or maybe we all don’t act like Labrador retrievers but we definitely think about them when the word “fetch” is heard. However, fetch in JavaScript is an interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses asynchronously. Communication is key and this means that the communication between the server and the client-side can pass data back and forth without the anachronistic procedure of refreshing the entire webpage for every new request made! This concept increasingly replaces the traditional way of asynchronously requesting data: XMLHttpRequest — object published by World Wide Web Consortium in 2006 that is used to retrieve data from a server asynchronously that wasn’t necessarily DRY and flexible when challenged by the Fetch API.

I developed a web app that heavily implements the usage of fetch called “déjà vu” — an application that utilizes a Rails API backend and vanilla JavaScript frontend to fetch aspects of the current weather via geolocation and allow users on the client-side to write comments in relation. We will do a deep dive into the implementation of fetch, the primordial challenges of its usage, and the success that I thankfully found throughout the project build. Let’s examine the following code:

The reason I invoked a fetch function in my code was to persist the data on the client side(the input value of a user’s comment form) to an external resource to which I can communicate with for saved data in my database(Rails API). For example, if I needed to return all comments, I can make a fetch request to retrieve all comments. If I wanted to delete a comment from my data base, I can make a fetch request to the database from the client-side to select and delete the comment without refreshing or changing the webpage.

Fetch Interfaces

The Fetch API has following interfaces from the example:

• fetch(): The fetch() method used to fetch a resource on line 65.
• Headers: Represents response/request headers, allowing you to query them and take different actions depending on the results. In the code above, the headers is an object that defines the type of data that is being passed through.
• Request: Represents a resource request. The fetch() function takes one mandatory argument, the path to the resource you want to fetch in this case it was a call to the Rails API URL where the data would be displayed. It returns a promise (a proxy for a value not necessarily known when the promise is created.), whether it is successful or not.
• Response: Represents the response to a request. Once the Promise is resolved, it returns a response referenced in line 67 that needs to be “jsonified”; ultimately, it will parse the initial JSON promise into a promise that embodies a JavaScript object. The data from the JavaScript object is then used to instantiate a new instance of Comment. A class method is then called on the new instance of the comment which takes in a user ID and — who cares, right?

What else can fetch do?

Aw CRUD.

Fetch can be used in conjunction with CRUD capabilities when asynchronously handling data from the client-side to the database. It uses different types of methods whose value is the HTTP action. The default method is the GET method; however, other methods include: POST, PATCH, and DELETE.

This is an example of a basic class method that utilizes a fetch function to the rails api to return all commments. The default fetch method is GET which is why it is not explicitly defined!

This is an example of an instance method that utilizes a fetch function to the api with a RESTful route to the API that specifies the comment that is slated for destruction. As you can see, the fetch function is relatively simpler because it is executing the client-side command to delete which simsply destroys the data from the database!

Fetch has dynamically changed the way communicating with different resources is handled — seamlessly and understandably. Using promises, it makes reading and analyzing the data that is returned from a request so much easier than its predecessor XMLHttpRequest. In an overwhelmingly increasing world of modern technology, convenience is a highly desired route for any capability being implemented in development which is why fetch is such an incredibly great tool for sourcing information. With convenience comes flexibility, with flexibility comes consistency, and with consistency comes eventual world domination! Seriously, the fetch API is an incredibly powerful tool in the JavaScript world and I am grateful to have utilized it to create a project that is robust and dynamic and I hope you are inspired to create some noteworthy projects of your own!

Now go get that ball! *wink*