loading...

How To Write Your First HTTP Request to NASA

ng_tracyy profile image 👩‍💻Tracy A King ・3 min read

I’m excited to introduce you to HTTP requests and provide you with tools and resources to get up and running.

Learning how to work with APIs is a great way to level up as a front end developer. It’s also a fun way to learn about how to retrieve data and what data is available to you.

The first thing you’ll need to do is request an API key from NASA by filling out this form to apply for an API key.

You can learn more about what an API key is in this video.
The API key will give you the ability to communicate with the NASA API. After you sign up, you will be immediately directed to a page with your new API key.
It should look like this:


Sensitive information is blurred to protect the user’s identification and personal API key

There are a number of different requests you can make with your new NASA API key.

My personal favorites include:

  • Asteroids — NEOWs: identifies asteroids based on their closest approach date to earth.
  • Mars Rover Photos: returns photos collected by NASA’s Curiosity, Opportunity, and Spirit rovers
  • EONET: allows users to browse the entire globe daily and look for natural events as they occur. Storms are regularly spotted in the tropics, dust storms over deserts, forest fires in the summers.

Please see the NASA API documentation for a full list of capabilities.

The Code

I will be using JavaScript’s Fetch API and show you, step-by-step, how to get everything running.

Step 1

Set up Fetch to make a request using the NASA API of your choice.
You’ll need the URL for the API you’re attempting to request data from. I’ve chosen to use the URL from my first example, Asteroids — NEOWs:

https://api.nasa.gov/neo/rest/v1/neo/browse?api_key=DEMO_KEY

Step 2

You’ll notice the DEMO_KEY at the end of the URL. This is what you’ll replace with your own personal API key.
Once the API key has been added, the URL should look very similar to this:

https://api.nasa.gov/neo/rest/v1/neo/browseapi_key=34oLy4FhODjKGewo2VIy8dsfgSGq6Qb1TQEpAX5s

The only difference is that your API key will be unique and not identical to the one above.

The Fetch method will take the URL listed above as its one mandatory argument in string form, like so:

fetch("https://api.nasa.gov/neo/rest/v1/neo/browseapi_key=34oLy4FhODjKGewo2VIy8dsfgSGq6Qb1TQEpAX5s")

Step 3

Now we need to append a promise using then to the fetch request which will be returned and resolved to the response of that request.
You’ll notice we build out two cases, a then and a catch — one for success and one for failure, respectively:

Here’s a demo of the executed code using JSFiddle with Chrome DevTools.

When I run the code, the response from the API will show up in the network tab of the dev console:

If you run this code using your unique API key in JSFiddle with the console open, you will either see the response object or you’re met with an alert box.

Please note the above code will not run because the API key is not valid.

Conclusion and Resources

Feel free to reach out to me if you have questions about the code. It’ll be easiest for both of us if you send over a JSFiddle of the issue you’re experiencing.

If NASA isn’t your thing, there are a ton of other APIs out there for you to work with, using similar code.

Here is a short list to check out:

Twitter: provides developers with a lot of different opportunities, including collecting data for trending words and topics in certain regions.

FEC: provides developers with tools to collect information on campaign donations in US federal elections.

Thank you to Kathryn Hodge for her video about API keys that I referenced above. I’d also like to thank Wyn Van Devanter, Chloé Powell, Manfred Steyer and Christian Howard for their feedback and support.

Posted on Aug 3 '19 by:

ng_tracyy profile

👩‍💻Tracy A King

@ng_tracyy

Front End engineer and web dev community builder based in DC. Loves to learn new technologies, share knowledge, and host + plan tech events. Organizer for WWC DC and Angular DC. Lives with two pups.

Discussion

markdown guide
 

This really highlights why you really should avoid giving frontend programs access to your API keys and other such tokens and always route requests via your backend.

You give access to your API keys and other secrets to the frontend and literally anyone can see them.

You should
1) Better block out your API key from your screenshots
2) Remove it from your example code
3) Get NASA to invalidate that one and issue you a new one

Edit: I guess the example codes use some demo key, that's probably fine. The screenshot is still easily readable.

 
  • This is not an issue if API tokens are restricted by domain.
  • There is nothing wrong with accessing the API from the frontend on its own. In some cases, it's even better (eg. when you don't want to put too much load on the backend, or you don't need to log metadata about these requests)
  • However it is true that more information is exposed, thus some thought should be put into how this can be abused, and how to prevent that.
 

When you say "the API" you probably very specifically mean this API specifically, there's a lot of other APIs that would require you to actually keep your credentials secret, when they e.g. result in billing events. This is why it's a good practice to avoid doing things like this on the frontend.

If your requests are causing too much load on your backend, just think what you're doing to other peoples' backends. Logging etc. is of course configurable, by you.

 

The credentials have been invalidated as an extra precaution but thank you!

 
 
 
 

This is really cool. Just having interesting data to work with for BigData or ML purposes is fun, and since I like Star Trek it plays in that theme very well.

 
 

This is so cool! thanks for sharing 🙌🏽🙌🏽

 

Might want to blur those credentials a bit more

 

The credentials have been invalidated as an extra precaution but thank you!

 

... also your API key is still in the example code.

 

You really should pixelize those credentials a bit better.

 

The credentials have been invalidated as an extra precaution but thank you!

 

Unless this is specifically for node, using JS to interact with an API using a private API key exposes it to anyone viewing the page. The proper way would be to use server-side processing.