How to use the Fetch API with JavaScript

When it comes to making HTTP requests inside of JavaScript, you can use a variety of different options. For example, you can use XMLHttpRequest, a third party library like Axios, or more recently, Fetch.

What exactly is Fetch?

Fetch is a promise based HTTP request API built into JavaScript. It's fairly well supported (87%+) and is promise based for ease of use and is a perfect fit for those wanting to use out of the box solutions for HTTP.

Let's take a look at a few different ways we can use fetch to access data from the JSON Placeholder API:

Get

fetch(`https://jsonplaceholder.typicode.com/posts`)
   .then(res => res.json())
   .then(posts => console.log(posts))

The above fetch call has three key parts.

1. We're calling `fetch` with an API and this defaults to a GET request, returning a promise.
2. This returns us a HTTP Response, and as we're only interested in the **body** of that response, we call res.json() to extract this.
3. As we now have the **data** from our API call, we can perform any action we want on it.
When it comes to other HTTP verbs such as POST/PUT/DElETE, the process is quite similar:

Customisation

Let's use fetch to create a new post by using HTTP POST. This starts by creating the actual post:

const newPost = {
   title: 'All about Fetch!',
   body: 'Fetch is awesome!'
}

We can now pass an options parameter into our fetch call, so let's make that:

const options = {
   method: 'POST',
   body: JSON.stringify(newPost),
   headers: new Headers({
       'Content-Type': 'application/json'
   })
}

The options can then be passed along to our request like so:

fetch(`https://jsonplaceholder.typicode.com/posts`, options)
   .then(res => res.json())
   .then(posts => console.log(posts))

We can continue to customise this by adding more items to our options object, and subsequently changing the method to other values such as PUT or DELETE. Here's an example:

const options = {
   method: 'PUT',
   cache: 'no-cache',
   body: JSON.stringify(newPost),
   headers: new Headers({
       'Content-Type': 'application/json'
   })
}

WRITTEN BY PAUL HALLIDAY
Learn a little more about Developer Advocate Paul Halliday and see his available blogs and courses on his website.

Who Are Ronald James?

We are a leading niche digital & tech recruitment specialist for the North East of England. We Specialise in the acquisition of high-performing technology talent across a variety of IT sectors including Digital & Technology Software Development.

Our ultimate goal is to make a positive impact on every client and candidate we serve - from the initial call and introduction, right up to the final delivery, we want our clients and candidates to feel they have had a beneficial and productive experience.

Contact our Team

If you’re looking to start your journey in sourcing talent or find your dream job, you’ll need a passionate, motivated team of experts to guide you. Check out our Jobs page for open vacancies. If interested, contact us or call 0191 620 0123 for a quick chat with our team.

Let's be Friends!

Follow us on our blog, Facebook, LinkedIn, Twitter or Instagram to follow industry news, events, success stories and new blogs releases.

 

Back to Blog