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.