Get Frontend API Data with Javascript

Using the native fetch() to get frontend api data with javascript is easier than ever, and works great alongside frameworks such as vue.

Grabbing data the old way

Before fetch came along, API requests were made using XMLHttpRequest, which didn’t include the use of Promises. It was a little bit verbose, like so:

const xhr = new XMLHttpRequest();

xhr.open('GET', url, true)

xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    const data = JSON.parse(xhr.responseText)
    console.log(data)
  } else {
    console.error('Request failed with status:', xhr.status)
  }
};

xhr.onerror = function () {
  console.error('Request failed')
};

xhr.send()

Grabbing data with fetch()

Using fetch looks cleaner and is simply easier to remember:

fetch(url)
  .then((response) => {
    return response.json();
  })
  .then((responseData) => {
    console.log(responseData);
  })
  .catch((error) => {
    console.error(error);
  });

But why is .then being used twice? Remember the Fetch returns a new Promise …?

The first .then call is completed when the incoming data has been read and is parsed as json.

The second .then handles the actual data, returning all the values you need and so on. This only happens after the first .then completes.

.catch is the error response only if something goes wrong along the way.

Sending data with fetch()

You can also send data using fetch. This makes use of a second parameter, if for example you want to get some filtered results. The second value accepts a javascript object as in the example, in this case fetchData.

let dataFiltered = {
  sortby: 'descending',
  category: 'music'
}

let fetchData = {
  method: 'POST',
  body: JSON.stringify(dataFiltered),
  headers: new Headers({
    'Content-Type': 'application/json; charset=UTF-8'
  })
}
let dataFiltered = {
  category: 'music'
}

let fetchData = {
  method: 'POST',
  body: JSON.stringify(dataFiltered),
  headers: new Headers({
    'Content-Type': 'application/json; charset=UTF-8'
  })
}

fetch(url, fetchData) { ... }

We use JSON.stringify on the sent data, because fetchData is a javascript object. As a string, it becomes easier for the server to parse and handle the request body. Using body is the most important part of fetchData, because it contains the sent data, whether that’s selected filters of form input data.

Sending form data with fetch()

Submitting forms with fetch can also be implemented as follows, where key value is equal to the form inputs name:

const formData = new FormData();
formData.append('key1', 'value1');
formData.append('key2', 'value2');

fetch(url, {
  method: 'POST',
  body: formData
});

Passing a fetch request object

When setting up the fetch request, you can also pass it a request which means it only requires one parameter (if you’re into that sort of thing):

let dataFiltered = {
  category: 'music'
}

let request = new Request(url, {
  method: 'POST',
  body: JSON.stringify(dataFiltered),
  headers: new Headers({
    'Content-Type': 'application/json; charset=UTF-8'
  })
});

fetch(request) { ... }

Note that the url is now passed into the new request object, which results in just one parameter being set in the fetch function. Not bad!

Fetch is now in the mainstream to get frontend api data with javascript. As of writing, it’s also becoming integrated with node.

Using fetch is one of the many new things I’ve learned with javascript.