FAQ: Requests with Fetch API - Handling a POST Request

This community-built FAQ covers the “Handling a POST 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 Handling a POST 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 Language Help.

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

Need broader help or resources? Head to Language Help and Tips and Resources. If you are wanting feedback or inspiration for a project, check out Projects.

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 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!

Regarding API requests in Javascript, I assume it is not usual and safe to include API key or other credentials inside Javascript code since it is client-side executing code. Instead it is preferred to make API requests in back-end. Is that correct?

Hello,

I have completed the exercise for “Handling a POST Request” and I can move to the next step however my bytesize is not working.

I made sure my apiKey is there and that I include http:// or https://. I refreshed the page.

Does anybody else has that problem?

2 Likes

const data = JSON.stringify({ destination: urlToShorten });

Why do we have destination: urlToShorten here? How does that work exactly?

It’s one of the params. This param is required by api. We must send in the body of our request.
" destination string required
The destination URL you want your branded short link to point to. Example: https://google.com"

I had the same problem. Make sure your API Key is entered correctly at the top of your code. This value might get automatically reset during the course of the lesson. Keep an eye on it.

2 Likes

Can anyone explain a bit on the throw new Error statement?
How does it get its callback function?

Within the course, it has one throw new Error which uses the Error Object. So far it is crystal clear. But when it comes to the function right after it I tend to get a bit confused. Anyone has any helps on it?

I also have the exact same problem! Did you ever figure out a solution?

I was dealing with the same issue. For some reason, the API key was gone from the top of main.js. I generated a new one and that fixed the problem.

1 Like

I found that the default API key generated by Rebrandly is not working. When I generated a new API and used the new one, the project functioned properly.

This may be a stupid question, but why it this exercise a POST request? The previous exercise accessing an API was a GET request. This one seems to work the same but is using a POST request.

It kinda works, but my shortened links time out. I tried several sites. Tried using a new API key. My code matches the “solution”

What’s the problem?

I couldn’t get it to actually work despite passing all requirements and regenerating my api key… thoughts?

1 Like

I had same problem, but I tried to create a new API and it worked.

1 Like

Thanks, it worked! Then I remember they mentioned this at the instructions
Remember that if you reset the exercise at any point, you will have to paste in your API key again at the top!

Hello, I did not understand the difference between a GET and a POST. In both exercises the final function was to enter data for an API to return information. So I don’t see what the difference is, only that in post, you have to specify more things when sending the request.

Hi,
I see the function renderResponse is being used in main.js, however, I’m not seeing an import statement. So my question is how are we accessing renderResponse without having the import statement?

1 Like

It should work now. I was having that same issue and noticed that I had deleted one of the quotes at the end of the API string (typo). When I fixed that, the URL shortener worked as expected.

Good code should have returned an error message though. Something like, check your API key.

Hey Guys, I have completed the exercise for “Handling a POST Request” and I can move to the next step however my bytesize is not working, because this erros:

/home/ccuser/workspace/requests-with-fetch-api-handle-post/public/main.js:6
const inputField = document.querySelector('#input');
                   ^

ReferenceError: document is not defined
    at Object.<anonymous> (/home/ccuser/workspace/requests-with-fetch-api-handle-

Anyone have the same problem?

Furthermore, my API keys its correctly setup. I don’t understand why isn’t work :frowning:

Good question. I have the same doubt