In the previous exercise, we walked through the boilerplate code for making a POST request using fetch() and .then(). In this exercise, we’re going to use that boilerplate code to shorten a URL using the Rebrandly URL Shortener API.
We will need a Rebrandly API key. To do this, read through the Rebrandly sign up guide to set up your API.
Keep in mind, while it’s ok to use your API key in these exercises, you should not share your key with anyone (not even to ask a question in the forums)! Also, if you reset the exercise at any point, you will have to paste in your API key again at the top.
Instructions
Set the value of the apiKey variable to your Rebrandly API key as a string.
If a correct key is not assigned, proper results will not be seen in the steps afterwards.
We will make our POST request inside the shortenUrl() function. Inside the code block of shortenUrl(), create a const variable named urlToShorten and assign it inputField.value.
urlToShorten will keep the value of what is being typed into the input field.
Note that we will be working inside shortenUrl() for the remainder of this exercise.
Underneath the urlToShorten declaration, create another const variable named data and assign it to the stringified version of {destination: urlToShorten}. We can use the JSON.stringify() method to do this.
The data variable will be used to send the information, which needs to be in string format, to the request body.
Below our data variable declaration, call the fetch() function. Pass url as its first argument and an empty object as its second argument.
Now it’s time to add some properties to the empty object that you just created. Add a property with the key method and the value 'POST'.
In the same object, add another property. The key for this property is headers and the value will be the following object:
We will use this to connect to the API.
In that same object that has the properties method and headers, add another property. The key is named body and the value will be data.
We’ve now created an object containing all the information we need for our POST request!