DEV Community

jdhank
jdhank

Posted on

Basics of Fetch

As a beginner in the world of coding and software engineering, I have spent a lot of time learning the basics of JavaScript. I have learned about variables, functions, scope, etc. The fundamentals are important to learn to give you a base to build on. As I started on my first project, I used fetch to pull a lot of the concepts I have been learning together. Fetch allows you to pull data from an API or a local json server and use that data in your application. There are APIs (Application Programming Interface) for a large number of topics, like weather, dogs, or crypto. Many are free to use, although you may need an API key for some others. You can also use your own data on a JSON (JavaScript Object Notation) server, which is what I did for my project. I created a movie recommendation application and wanted to use movies that I love as the data, because I wouldn't want to recommend just any random movie. After creating my db.json, I was ready to use fetch to get my data and use it within my application.

fetch("http://localhost:3000/movies")
    .then(response => response.json())
    .then(data => {
       console.log(data)
Enter fullscreen mode Exit fullscreen mode

First, you call fetch and pass it the URL for your API or json server into the parenthesis. It makes a request to the URL and gives back a response in a promise. Then you take the response you get and need to convert the data from json. After you take the data that you now have and you can use that however you need. This would be a GET request, because you are getting data from your source. Fetch also allows you to post In the example above I just used console.log(data) to see what that data looked like.

Image description

I created a random movie button that used the data from my fetch request to pull my list of movies and give me just one back, at random. Once you have your data you can create lists, tables, etc. with it.

fetch("http://localhost:3000/movies")
    .then (response => response.json())
    .then(data => {
        console.log(data);
        let randomMovie = data[Math.floor(Math.random() * data.length)]
    randomMovieTitle.innerHTML = randomMovie.title
    randomMovieRating.innerHTML = `Rating: ${randomMovie.rating}`
    })
Enter fullscreen mode Exit fullscreen mode

You can also make a POST, PATCH, DELETE which would modify the contents of your data. Using the example of my movie recommender, a POST request would add a new movie to the database of movies. A PATCH request would edit one of the movies and its data. A DELETE request would delete a movie from the list. I didn't want to change anything on my list so I didn't end up using any of those methods, but they could be useful for future projects. It is important to not that if you were to use these requests. You would need to make sure that you include headers and a body in your request.

fetch("http://localhost:3000/movies")
method: 'POST'
headers:{
'Content-Type' : 'application/json'
},
body.JSON.stringify()
},
.then (response => response.json())
    .then(data => {
        console.log(data);
Enter fullscreen mode Exit fullscreen mode

Once you are able to take your data and utilize it in your application, you are opened up to a world of new possibilities. I am excited to expand my knowledge and use the basics of fetch that I have learned and make new projects with many different sets of data.

Top comments (0)