The Basics of Fetch API

A Guide for Beginners

Brenden Thornton
Aug 25, 2019 · 3 min read

Requesting resources from an API is a pretty common and almost vital feature needed for building modern applications. Whether you’ve built your own API or you’re using a third-party API, you need a way to make your requests without slowing down your application. This is where the Fetch API comes into play and it’s one of the most popular tools to get the job done.

Let’s Talk About Ajax

The Fetch API

Creating a Request

fetch(`https://pokeapi.co/api/v2/pokemon/pikachu/')

Here’s our basic setup of the fetch() method. We pop in the desired API endpoint and now when this runs, it will perform an HTTP GET request, or will it? There’s another basic step after this that is needed to see our response.

fetch(`https://pokeapi.co/api/v2/pokemon/pikachu/')
.then(response => response.json() )
.then(pokemon => console.log(pokemon) )

In this next step you can see we’re using .then which correlates with the fact that fetch is based on using Promises. When making our request, we don’t want our user interface to stop and wait for the request to finish so we use .then to wait for the servers response where we can then console.log the data returned.

Let us breakdown what’s happening in each .then . When we launch our request with fetch() a Promise is initiated and we must wait for the Response object. This is handled with our first .then which doesn’t return the data but gives us the Response object.

{
body: ReadableStream
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: ""
type: "cors"
url: "https://pokeapi.co/api/v2/pokemon/pikachu/"
}

Here we can see our response which is information about the request we made. From here we have the ability to call a .json() method on our response which will trigger another Promise that returns our response body as json data.

Error Handling

fetch(`https://pokeapi.co/api/v2/pokemon/pikachu/')
.then(response => response.json() )
.then(pokemon => console.log(pokemon) )
.catch( error => console.error('error:', error) );

Conclusion

I highly recommend exploring deeper into the Fetch API and I’ll make sure to leave you further resources at the end of this article. If you enjoy consuming API’s like I do, then do yourself a favor and learn the Fetch API!

Happy Coding!

The Startup

Medium's largest active publication, followed by +610K people. Follow to join our community.

Brenden Thornton

Written by

Full-Stack Developer. @FlatironSchool. UCF. Loving Father & Husband.

The Startup

Medium's largest active publication, followed by +610K people. Follow to join our community.

More From Medium

More from The Startup

More from The Startup

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade