JavaScript Cookbook, 3rd Edition

Chapter 13. Fetching Remote Data

The ability to receive and process data in the browser, without refreshing a page, is one of JavaScript’s super powers. Real-time data trackers, chat applications, social media feed updates, and much more, are all made possible through JavaScript’s ability to make a request to a server and update content on the page. In this chapter, we’ll cover how to make and process those requests.

Note

You may also hear the term “AJAX,” which is an abbreviation for Asynchronous JavaScript and XML. Although originally coined in reference to retrieving XML, AJAX has become a generalized term for retrieving and sending data to a remote server from a web browser.

Requesting Remote Data with Fetch

Problem

You need to request remote data from a server.

Solution

Use the Fetch API, which allows you to make requests and manipulate the response. To make a simple request, pass a URL as a fetch parameter, which returns the response as a promise. The following example requests the URL, parses the JSON response, and logs the response to the console:

const url = 'https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY';
fetch(url)
  .then(response => response.json())
  .then(data => console.log(data));

Alternately, use the async/await syntax with fetch:

const url = 'https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY';

async function fetchRequest() {
  const response = await fetch(url);
  const data = await response.json();
  console.log(data);
}

fetchRequest();

Discussion

The ...