We are going to walk through and recreate the boilerplate code necessary to create a GET request using the async and await.
Here are some key points to keep in mind as we walk through the code:
- Using an
asyncfunction that will return a promise. awaitcan only be used in anasyncfunction.awaitallows a program to run while waiting for a promise to resolve.- In a
try...catchstatement, code in thetryblock will be run and in the event of an exception/error, the code in thecatchstatement will run.
Feel free to refer to the async/await GET diagram at any point while completing this exercise:
Instructions
In main.js, create an arrow function using the async keyword and save it to a const getData.
The async keyword will ensure that the function returns a promise.
Check the hint for syntax help.
In the code block for getData, we should add a try statement with an empty code block.
Below the try statement’s code block, add a catch(error) statement.
The code in the try block will send a request and handle the response. The catch statement will then take care of an error if it is thrown.
Check the hint for syntax help.
Inside the catch code block, log error to the console.
Since this exercise is an example, we’re using console.log() to view the error. Generally, developers create a more sophisticated way of handling the error, like redirecting their users to another page, but logging is fine for us at the moment.
Now we have to consider what to do inside of the code block of the try statement. We should start by using the await keyword before calling fetch(). Pass in the following URL, as a string, to the function as its first argument:
We’ll have to save the returned promise in a variable called response using the const keyword. response will save the response of endpoint once that information has been sent back.
Check the hint for syntax help.
Under response, create a conditional statement that checks if the ok property of the response object evaluates to a truthy value.
Inside the code block of the conditional statement, await the resolution of calling the .json() method on response.
Save the returned object to a variable called jsonResponse using the keyword const.
Since .json() is an asynchronous method we have to await until the promise status is resolved. Then we store the value to know what data the JSON holds.
Return jsonResponse directly below the code you wrote in the previous step.
Normally, we’d want to use the information from jsonResponse in a different manner. In this exercise, we’re practicing how to write the boilerplate code.
Below the conditional statement, throw a new Error. The message the error should raise is ‘Request failed!’.