Network Requests: GETs

Learning Goals

• Understand the difference between synchronous and asynchronous operations
• Be familiar with the fetch API
• Understand how network requests work
• Understand the various levels of HTTP status codes
• Know what a GET request does and how to use it

Vocab

• Async / Asynchronous Executing code without blocking the execution of code after it
• AJAX Updating a webpage based on data from the network without reloading the whole thing

What is a network request?

Let’s start by reviewing what a network request is and see it in action!

Types of Requests

Network requests can be made to GET information from a server, but it’s not the only use.

The HTTP protocol defines a variety of types of requests we can make. These include:

• GET - retrieve information from a server
• POST - send information to a server, creating resources
• PUT - send information to a server, updating entire resources
• PATCH - send information to a server, updating partial resources
• DELETE - remove information from a server
• And many others

Today we’ll be focusing on how to do a GET request on the frontend side.

Responses

Every request we make, successful or not, will receive a response. When looking at the Network tab in the dev tools, you might have noticed some requests had different response codes. The HTTP protocol lays a series of Response Codes to give more information on the status of a request.

Making a Request

Each network request takes time - they’re expensive. Imagine if you had to wait for a webpage to load one thing at a time! It would not make for a great user experience.

Network requests are expensive no matter what we do. However, we can run them asynchronously, saving some time.

Asynchronous operations refer to things that can happen outside the normal order of execution. Network requests can be synchronous or asynchronous, but most modern applications do them asynchronously to improve performance / the user experience.

ES6: fetch()

Speaking of using the fetch API, let’s take a look at the docs on what it is!

fetch(resourceUrl, {/*init object with `method`, `body`, and other optional properties*/});
// Returns a promise

GET with Fetch

By default, fetch performs a GET request. This means that if we only add a resource url to the fetch call, we’ll try and GET information from that resource.

fetch("https://opentdb.com/api.php?amount=1&category=27&type=multiple");

Promises - The Quick Version

A Promise is an object that represents the eventual completion of an action.

We don’t need to worry too much about them now. Just know that a Promise will either be resolved upon completion, or rejected upon failure. We can use special methods for promises to determine what needs to happen in either of those scenarios:

• .then() runs upon the resolution of a promise. Returns another promise
• .catch() runs upon the rejection of a failed promise. Used for error handling

What do I do with this “Promise {}"?

Diving into the returned promise reveals some information, such as its status and value, but nothing that’s too immediately useful. Instead we have to resolve it:

fetch("https://opentdb.com/api.php?amount=1&category=27&type=multiple")
  .then(response => console.log(response))

• What do you get when you log the response object? Take note of the properties there.
• There’s one problem: we can’t seem to get the data we want from the Response.body. How is data sent through requests and responses?

Parsing Our Response

Similar to what you did with localStorage, we’ll need to parse our response! We’ll need to use the Body.json() method that comes with fetch to parse it and call another .then().

From the docs, the .json() method returns “A promise that resolves with the result of parsing the body text as JSON. This could be anything that can be represented by JSON — an object, an array, a string, a number.

Let’s try it out!

fetch("https://opentdb.com/api.php?amount=1&category=27&type=multiple")
  .then(response => response.json())
  .then(data => console.log(data));

Lastly, we can add in a .catch() to account for any errors we may run into.

fetch("https://opentdb.com/api.php?amount=1&category=27&type=multiple")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => /* do something else */);

Common Misconceptions

Let’s look at this code:

fetch('some_url')
.then(res => res.json())
.then(data => console.log(data))
.then(data => /* do something with data */) /* <--- this line won't work! */

Let’s think about these questions:

Big takeaway: Console logs are great as you’re coding as a way to see what the data looks like that is coming through. BUT! Once you’re ready to actually do things with that data, you’ll want to remove your console logs OR have the console log in the same callback function as your logic, like this:

fetch('some_url')
.then(res => res.json())
.then(data => {
  console.log(data);
  /* do something with data */
})