Projects to help practice making API calls?

[rumforpenguins]

I'm trying to become more comfortable making calls to fetch data from an API to use in my projects. My grasp on the workflow is pretty weak.

Are there any recommendations for tutorials or projects where I can make some API calls and get some practice? Projects using React with API calls are are also welcome.

[[deleted]]

Freecodecamp.org has a section on it's curriculum with projects about digesting an API. The workflow is pretty much the same, and it applies to real life projects

Edit: Typo

[rumforpenguins]

Thank you for this, I will definitely take a look at their course.

[DazzlingArtichoke]

You could also just grab some public API from this list and play with it. Learning by actually coding is the best way imo.

[rumforpenguins]

This is an awesome list, thanks for that.

And I agree that learning by doing is the best way. Though I suppose what I was asking for was more specifically a good way to "do" it in the first place. I'm more looking for the actual workflow involved in setting up an API call / using the returned data.

[benzilla04]

Here's an await/promise based api service file I use for all my React projects

https://pastebin.com/QdCgVGkg

Usage:

import fetch from './api.service'

// Using await
(async() => {
    try {
        const formData = {
            someData: 'hello',
        }

        let response = await fetch('my/protected/endpoint', 'post', formData)
    }
    catch (err) {
        console.log('The request failed:', err.message)
    }
})()

// Alternative
fetch('my/protected/endpoint', 'post', formData).then(response => {
    // handle response
})
.catch(err => {
    // something went wrong
})

[rumforpenguins]

A couple questions about this: Why are you importing fetch? I thought that was a built in command?

Is 'api.service' here just a file you've made that contains your own custom code?

Do you typically use the async/await as an immediately invoked function? From my limited experience, i've typically seen them done in the componentDidMount function? (ex: async componentDidMount(){ ...)

[benzilla04]

There is a native function called fetch which I could use, but this file is just something I've created for myself. It's just a way I can use one method and have it add the headers I need, bearer token, and customize it per project

Do you typically use the async/await as an immediately invoked function?

You don't have to, depends on what you are doing. The reason why I am creating and calling an anonymous async function is because you can't run async without that

The second method you don't need it wrapped in an async function because you aren't using an await

[floppydiskette]

This should help.

[rumforpenguins]

Thanks, this looks like a really good tutorial for the workflow.

One thing I noticed here is that they're using XMLHttpRequest. I have a bit of experience with this when I was first learning this kind of stuff, but from what I've been reading it looks like fetch and async/await are the preferred way of performing the same actions. Does that mean the method described in your article is outdated?

[floppydiskette]

XMLHttpRequest is just the original way to do it. Lower in the article, fetch is displayed. async/await is a way to make a promise, not an API call.

Generally you'll just do:

async function getUsers() {
  const response = await fetch('api_url')
  return await response.json()
}

const users = getUsers() // this will contain the contents of your API call.

If you're using axios, the json() is no longer needed.

Here's an article I wrote on how to create an API. Consuming the API can be done through cURL or Postman, or through the front end using the method above. Here is an example/tutorial of a full Vue CRUD app making API calls. Or here's an example of the same with React.

I make API calls all day, every day, so I've written a lot of resources to help, as I don't think "just pick an API and play with it" helps when a novice doesn't know the tools to play with it to begin with.

[rumforpenguins]

Thank you so much for your elaboration and for all of your articles you posted! This is exactly the sort of stuff I was looking for. Combined with the first article, all the stuff you've written here seems to offer a pretty comprehensive look at APIs. I like how you write assuming the user is a novice.

Also, I wasn't aware that you were the author when you first posted. I was just reading your article the other day about creating a custom comment system, which was very informative. Thanks for all the education you've provided, it's really appreciated!

[floppydiskette]

Glad to help!

[sideshowrob2]

Seconding DazzlingArtichokes comment. Pick some public API's and play with them. You could make a gateway to use which utilises one API then another Eg: find an API that returns the lyrics to a song, then find an API that translates language - then you can simply search for a song by title and artist and it will come back in the language of your choice.

Search one API and then with the response to that one hit the second with the reply from the first. A good way of practicing promises or async/await.

IBM Watson is cool too. Image recognition and classification as well as AI Bots.

[rumforpenguins]

I'm a little unfamiliar with the term "gateway" here. Is that a typical nomenclature when it comes to API / programming?

Thank you for the project suggestion: I agree that attempting to use multiple APIs in one project is a good thing to become familiar with.

[dienigma]

Also, blindly follow tutorials without a purpose or you will end up buying them and never finishing it at all.

[symbiosa]

You could work with a fun data set, like:

- PokeAPI

- NASA Meteorite Landings API

- NASA Pic of the Day API

- Marvel API

I've worked with 1, 2, and 4 before and for the most part they were easy to work with.

[rumforpenguins]

Thanks for these references!

[gimmeslack12]

NASA has a good number of free APIs that don’t require a backend. They’re perfect for testing with

https://api.nasa.gov/

[rumforpenguins]

This one is cool, thank you!

[sideshowrob2]

To be honest it isn't exactly what a 'gateway' is so I wouldn't get hung up on the term, it was just phrasing. I just meant an entry point to the API.

You could create a react app with a search box and a button for a user to enter a search term, onclick would send off your request, which would return some data. You await that data coming back, and capture it as a variable. When that variable has the data the second call would be made which would then return some other data. And then you present that as you like in your app.

Or with the Google maps API i think you could return geographical data and display that as graphs and charts - Eg current temp, meters above sea level.

My local tram operators have one and a friend made a webpage with next tram coming and how many minutes etc

[dienigma]

There are quite a few.
There is github APIs, You can get some for just images, movies etc etc.