JavaScript offers a global method fetch(), which provides an easy way to fetch data asynchronously from the internet. Fetch takes advantage of JavaScript promises, so if you haven't familiarized yourself with those just yet, I suggest giving this MDN Doc a quick read.

Let's have a look at a basic fetch request:

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

If you've followed a coding tutorial or two, you may have used this structure before. But let's break down exactly what's going on here line for line:

1. Fetch() in line 1 takes one argument - the path to the resource you're looking to extract data from. This returns a representation of the entire HTTP response. We generally don't need all this data, so we pass the entire HTTP response to line 2.

2. .then(response=>response.json()) takes in the argument response, which is the returned HTTP body value form line one. We then call the .json() method on that HTTP body, which extracts the JSON body text and converts it into a native JavaScript object.

3. By passing this native JavaScript object as the argument to line 3's .then method as data, we can log data and see our JavaScript object in the console.

But let's look at a hard example by leveraging a free-to-use Chuck Norris joke API ( credit ).

Let's call fetch()

Copy the following into your browser's console:

fetch('https://api.chucknorris.io/jokes/random');

You should receive a promise. Upon expanding that promise, we see that the promise's state is "fulfilled", and by expanding the promise result, we'll see the HTTP response.

Handle the returned promise value with .then()

Now copy the following into your console:

fetch('https://api.chucknorris.io/jokes/random')
.then(response => console.log(response));

By logging our HTTP response, we see the HTTP response logged to the console.

Extract JSON text and turn it into an object

fetch('https://api.chucknorris.io/jokes/random')
.then(response => response.json());

The difference here is subtle, but by calling .json() on response (which is our HTTP response), we extract JSON text and convert that text into a JavaScript object. By popping open the returned promise, we can see that the promise result is now an "object" vs. "response":

without .json() ...

with .json() ...

And finally, let's take that JavaScript object and log it to the console:

fetch('https://api.chucknorris.io/jokes/random')
  .then(response => response.json())
  .then(data => console.log(data.value));

Note that data is our javascript object, and the random joke that we're retrieving is located at the object key value, which we access with dot notation.

Nice! We made our first API call.

We've successfully called a Chuck Norris joke from across the internet directly into your browser's console using the fetch() API.

Cheers!