FAQ: Requests II - fetch() GET Requests II

[wiki-bot]

This community-built FAQ covers the “fetch() GET Requests II” exercise from the lesson “Requests II”.

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

Web Development

Introduction To JavaScript

FAQs on the exercise fetch() GET Requests II

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 () 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 () below!

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

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

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!

[eleove]

Hi,
Why is there no else statement here:

if (response.ok) {
return response.json();
}
throw new Error(‘Request failed!’);

Isn’t the error going to be thrown even though response.ok = true ?

Thnaks

[iani_ancilla]

I have exact same question. Did you by any chance figure out the answer in the meanwhile?

[tensor2]

Isn’t the error going to be thrown even though response.ok = true ?

No When we return response.json(), we exit the function, so we never get to the point of throwing an error. The return basically means we are done.

Here’s a quote from Mozilla’s return documentation:

When a return statement is used in a function body, the execution of the function is stopped.

[chiplong]

IF we get a failed response back from the fetch, not a network error but a falsy response.ok, where is that error displayed? Can we capture a better error message?

[chloeoscar]

Hello so

1. throw new Error(‘Request failed!’);

is not an ‘else’ situation here? Then what is it?

2. Also for
   (response) => {
   if (response.ok) {
   return response.json();

in the previous excercises, we always use () => {}, why that they omit () here? coz it is single parameter?

3 then in

.then(jsonResponse => {
return jsonResponse;
})

when i put then(jsonResponse =>
return jsonResponse;)

it doesn’t work. I thought for single line block you can omit the ‘return’?

Thanks!

[toskap3]

Hi! I’m also confused about your first question with there being no else, but for your second question I think we don’t use () because it is an anonymous function, so we don’t really define a function name, and back in the Functions section of the course, under Concise Body Arrow Functions, it shows that yes, when one parameter is used then the () aren’t needed.

As for your third question, I think we need the {} because inside the .then() is an anonymous function. {} contain the function body, and return jsonResponse is the function body in this case.

it doesn’t work. I thought for single line block you can omit the ‘return’?

I’m not sure what you meant here, because in your example return isn’t omitted.

Anyway, hope this helps!

[themav]

I just wanted to confirm:

if you only have one parameter, you may leave out the parentheses in an arrow function.

Regarding your question about the single-line functions, you can omit the return command altogether. just parameter => expression. I found this info on this article from the Mozilla Hacks blog.

Here:

When you just need a simple function with one argument, the new arrow function syntax is simply Identifier => Expression . You get to skip typing function and return , as well as some parentheses, braces, and a semicolon.

[themav]

I’m unclear on why there are two .then() calls.

It looks to me as though the first one returns a JSON object if successful…and then passes it to the next .then() call to do the exact same thing.

Can you help me understand what’s happening here? I don’t see it explained in the exercise itself.

UNRELATED These .then() functions are what are known as “middleware,” correct?

[phiboy788]

Could anyone please explain to me the parameters response and jsonResponse? are these fixed values or variables that would be defined within the code body of a normal site?

[ifrancesalcantara]

What is the difference between this not accepted syntax:
.then((response)=>{
and this:
.then(response=>{
? If it’s an anonymous function, wouldn’t it be the same?

[bit7466237488]

Hi, I was wondering about the last part of the excersice:

" The second .then() ‘s success callback won’t run until the previous .then() method has finished running. It will also not run if there was an error was thrown previously."

Why wouldn’t the second .then() run if an error message was thrown previously?

Thanks

[e3sheridan]

From what I can tell, this appears to be handling two different types of error. The first then handles the error in which the GET request gets to the final destination but fails to return something from the server. The second then handles the error in which the network fails and the request never gets to the server.

[neverdasummer]

I’m having trouble understanding this also. Here is what I have come up with but I’m not sure if it is correct or not.
When we return response.json() it doesn’t just return a message we can log, it returns a promise that must be dealt with properly with the .then() method.
The .then() method reads the promise that response.json() passes into it and we can then extract the key value from to log or return.

Check out this web page for reference on .json()

Body.json()

You will also notice this mentioned in the next lesson (4 fetch() GET Requests III)
8.
Delete renderJsonResponse(response) and replace it with return response.json() .
By returning response.json() , the next function that is .then() chained to it will receive a Promise with JSON data.

[sullivankevint]

As a more general question, after going over the advantages of using await in ES6, why does this resort to native promise syntax?

[yooperjb]

I have the exact same question. I’m not sure why these parameters are defined the way they are and how we actually pass response or jsonResponse. Can these be called anything, or do they specifically have to be response and jsonResponse? It would be great to explain this in the tutorial.

[stoutfella]

Can someone rewrite the answer using the regular function way? I think it’ll help me and others struggling to visualize the construction of requests moving forward.

Below is the answer (written in arrow style).

fetch('https://api-to-call.com/endpoint').then(response => {
  if (response.ok) {
    return response.json();
  } 
  throw new Error('Request failed!');
}, networkError => {
  console.log(networkError.message);
}).then(jsonResponse => {
  return jsonResponse;
});

[mojib-mohammad]

JavaScript code is bieng executed from top to bottom line by line, cause of that when it reaches the if(response.ok) { return response.json(); } code block, if the if statement response.ok is truthy then the code inside of the if statement block will be executed and by using the return keyword we are telling it to exit from the function.

[codedcolt]

you may use either, they are both valid

[codedcolt]

Suppose there is no error and everything is successful. What is the second .then() used for?