FAQ: Requests with Fetch API - Making an async GET Request

Frequently Asked Questions Uncategorized
1

Community%20FAQs%20on%20Codecademy%20Exercises
Community%20FAQs%20on%20Codecademy%20Exercises1000×208 141 KB

This community-built FAQ covers the “Making an async GET Request” exercise from the lesson “Requests with Fetch API”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Learn Full-stack Engineering for your Business
Create a Front-End App with React

Learn Intermediate JavaScript

FAQs on the exercise Making an async GET Request

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!
You can also find further discussion and get answers to your questions over in #get-help.

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head to #get-help and #community:tips-and-resources. If you are wanting feedback or inspiration for a project, check out #project.

Looking for motivation to keep learning? Join our wider discussions in #community

Learn more about how to use this guide.

Found a bug? Report it online, or post in #community:Codecademy-Bug-Reporting

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

2

shouldn’t we throw an error ?

1 Like
3

What’s going on in the renderResponse() helper function? The first 2 if statements to be specific
Is the function parameter meant to be an object or array, I’m lost

4

Object is object and array is object too.
the function’s parameter is an array of objects:

[{word: "scratch", score: 1001}, {word: "disease", score: 1000}, {word: "fish", score: 999},…]

About the first if I wrote my thoughts two lessons ago=)
The second if checks that array has at least one element in it. If (res.length = 0) then Try again!

5

Why do we need the second await statement await response.json()?

Are we not already awaiting response? Seems to work without it.

3 Likes
6

What does the .firstChild() and .removeChild() do at the bottom of the program?

7

In the html, the div in which the results are to be displayed will be:

<div id="responseField">
</div>

There is an event listener attached to the "submit" button. When the submit button is clicked, displaySuggestions is called.

const displaySuggestions = (event) => {
  event.preventDefault();
  while(responseField.firstChild){
    responseField.removeChild(responseField.firstChild)
  }
  getSuggestions();
}

If the responseField div is empty, then we execute the getSuggestions function.

However, if the results from a previous word search OR some message is present in the div, then we want to clear the div so that we can display the results of the new search.

If there are results from a previous search in the responseField div, then there will be an ordered list with a number of <li> elements. These are considered as the children of the responseField div (parent) element.

If the previous search didn’t return any results, then the responseField will be displaying "<p>Try again!</p><p>There were no suggestions found!</p>". These two <p> elements will be the children of the responseField div in this situation.

See the function renderResponse in the helperFunctions.js file to see how the responseField is being populated.

Elements, whitespace and comments if present all qualify as children.

After the submit button is clicked for new search, removeChild removes the first child of the responseField div. It keeps looping [because of the condition while (responseField.firstChild)] till all children of the responseField div are removed. Once that happens and the div has no more children, then null is returned which means the while condition is no longer true. With the responseField div wiped clean, getSuggestions() is called to process and display the new search results.

See documentation for more details:
https://developer.mozilla.org/en-US/docs/Web/API/Node/firstChild
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild

8

@mtf
why do we use await here: const jsonResponse = await response.json();?

try {
    const response = await fetch(endpoint, {cache: 'no-cache'});
    if(response.ok){
//                         ↓↓↓
      const jsonResponse = await response.json();
//                         ↑↑↑
      renderResponse(jsonResponse);
    }

If we don’t use await, then jsonResponse has the value: [object Promise].

And if we use await, then json Response has the value:
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]…
And we can refer to the .word property of each object and get the value.

9

Sorry, I’ve been away. Also must apologize for not being able to properly answer your question since API is not my strong suit. I’m an old timer who learned XHR in the vanilla form, and then later in jQuery, but that was ages ago and I have no more involvement in web development or experience with Promise and Await. @mtrtrk may be able to help you with this one.

1 Like
10

No problems. Anyway, thanks for the answer.

11

Can you flesh out your thought process and elaborate a bit more? It might help in identifying your point of confusion.

12

At the beginning of the try block we declare a variable response, await the resolution of fetch() method. Thus, we get the response object.:

const response = await fetch(endpoint, {cache: 'no-cache'});

In the Intro to GET Requests using Fetch, we were told that response.json() converts the response object to JSON (Actually, mdn web docs use the formulation in the example that we “get JSON value from the response body”).

555
555889×459 14 KB

Why do we await twice?
Why must the “conversion” be asynchronous?
Doesn’t the response variable already contain a finished object?

13

The fetch() method (see documentation) returns a Promise (documentation). The first await

const response = await fetch(endpoint, {cache: 'no-cache'});

is necessary so that instead of the Promise, we can work with the resolved Response (documentation) object. The Response object will include the status, headers, body and other properties of the response. But, the body is actually a ReadableStream (see documentation).

The .json() method (see documentation)

The json() method of the Response interface takes a Response stream and reads it to completion. It returns a promise which resolves with the result of parsing the body text as JSON.

If you omit the second await in your snippet,

//                         ↓↓↓
      const jsonResponse = await response.json();
//                         ↑↑↑

then jsonResponse will be a Promise. But instead of the Promise, we want to work with the result in JSON form. By using the await operator (documentation), we allow the Readable Stream to be read to completion and then allow the Promise to resolve into an object that can be represented as JSON. We can then use this JSON as we are doing in the helper function renderResponse.

Some links to explore:

2 Likes
14

Thank you for the detailed answer and useful links.
Now everything is clear :slight_smile:

2 Likes