Intro to fetch()
A quick introduction to fetch from a beginner’s perspective
Javascript is a programming language that is necessary to learn in order to write web applications. Although the language is not everyone’s cup of tea due to its unstructured nature and bad parts( it was written in 10 days!), it is the language web browsers understand. Javascript is a powerful language because it allows the creation of highly responsive interfaces for an upgraded user experience and it also produces dynamic functionality which allows not having to wait for the server to react and show another page.There are different parts of Javascript to be acquainted with but today we will focus on fetch.
What is fetch?
The fetch() method is used to get web requests and responses. It runs asynchronously meaning it allows us to to complete other steps until it runs therefore not stopping or slowing down our browser. We can render images, text and media without having the user wait or stare at a blank screen until the data loads.Fetch is much broader and has many more characteristics than those listed in this article. This is a very brief quick example into fetch, to learn more about using fetch check out this documentation.
Let’s look at an example fetch method code:
In the above example the first line fetches data from the movies API through the given url. The url is the path to the resource we are fetching.Notice the data is in json format which is a common data type that we can call a function on.This line returns a promise. Promises are an object that represents our data but it isn't our data.Our fetches return promises of what we can expect to receive once our data is fetched.
The .then() method returns our data. It is no longer a promise but its now the content of the data we requested.
In the third line we can run a function on our fetched data. In the example the function is to console.log the data and it will return the data. We can expect to see the listed data if we open up our DevTools in the browser. This method allows us to perform DOM manipulation on the returned data . The DOM deserves it’s own article but in short it allows us to manage the structure and contents of a page. For more about the DOM click here.
It is my understanding that fetch is fairly new. Ajax is the known technique to provide great features and short wait times for the user but fetch is a modern abstraction of all the Ajax components. Ajax is a much more complicated than fetch, to dive into what it is click here. There are other ways to fetch data but fetch() happened and it is here to stay. Yay Gretchen!
Accustomed to working with Ruby, in Module 3 at the Flatiron school we shifted to Javascript this week along with DOM manipulation and eventListeners, fetch was one of the concepts I had to try to grasp as quickly as possible. I hope this blog gives someone freshly introduced to fetch some perspective on what it is. Thanks for reading!
