We are going to reconstruct the boilerplate code necessary to create a GET request using the
fetch() function step-by-step.
Feel free to refer to the
fetch() GET diagram at any point while completing this exercise:
First, call the
fetch() function and pass it this URL as a string:
This first argument determines the endpoint of the request.
.then() method to the end of the
fetch() function and pass it the success callback arrow function as its first argument. The success callback function takes one parameter,
.then() will fire only after the promise status of
fetch() has been resolved.
Inside of the
response callback function, check the
ok property of
response inside of a conditional statement. In the code block of the conditional statement, return
The reason we’re testing the
ok property of the response object is that it will be a Boolean value. If there were no errors
response.ok will be
true and then your code will return
Below the curly braces of the conditional statement, create a new error with this code:
throw new Error('Request failed!');
Your code will
throw this error when
response.ok is falsy.
Add a second argument to
.then(), it will be an arrow function that will handle our failures. Separate the first callback function from the second with a comma. The second callback function takes a single parameter,
In the code block of the second callback function, log
networkError.message to the console.
If we could not reach the endpoint at all, e.g., the server is down, then we would get this
.then() method to the end of the first
Pass the new
.then() method a callback function that takes
jsonResponse as its parameter and return
.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.