Whether you are a freelance developer, professional developer or just learning on your own, you will undoubtedly come across the need, or rather opportunity, to use an API to get data from another source. Many of us are often intimidated by the thought of using an API due to having to use fetch (or some library), the way URLs can often look, and the sheer mess of the returned data (often JSON) being hard to look through or parse.
This is going to be a very basic tutorial, but you should be able to easily apply the same principles to most API uses you may come across. We will be using Dev Joke API for this, but you could substitute with a Chuck Norris joke API or many other different APIs for this.
Open your code editor of choice. I use VSCode myself, but just about any code editor should do just fine. First thing we want to do is, in your terminal in your project directory, run npm init -y which will initialize your node project.
Let’s install the package we will use for our get request, Axios by running, in the terminal, the following command: npm -install axios
Now, lets create a new file called index.js.
Inside of index.js, we will import the axios package as follows: const axios = require(‘axios’);
With Axios imported, we can get started with the following code:
axios.get('https://backend-omega-seven.vercel.app/api/getjoke') .then(function (response) { // handle success console.log(response.data); }) .catch(function (error) { // handle error console.log(error); });
Now if you run node index.js in your terminal, you should get back a random joke, but as a JSON object. We can clean this up a little bit.
Let’s comment out console.log(response.data); and replace it with:
console.log(`Question: ${response.data[0].question}`); console.log(`Punchline: ${response.data[0].punchline}`);
Now if you run node index.js again, you should see something a little nicer formatted, like:
Question: What are clouds made of? Punchline: Mostly linux servers.
Here is what the final code should look similar to:
const axios = require('axios'); axios.get('https://backend-omega-seven.vercel.app/api/getjoke') .then(function (response) { // handle success //console.log(response.data); console.log(`Question: ${response.data[0].question}`); console.log(`Punchline: ${response.data[0].punchline}`); }) .catch(function (error) { // handle error console.log(error); });
I’ll go over some of the code that you might not quite understand yet.
axios.get(‘https://backend-omega-seven.vercel.app/api/getjoke’) is making a request to GET information from the URL provided. In this case, it will be getting a random joke.
The code below
.then(function (response) { // handle success //console.log(response.data); console.log(`Question: ${response.data[0].question}`); console.log(`Punchline: ${response.data[0].punchline}`); })Is simply saying to wait for the data, and then do something… in this case, log out the data we want to see.
console.log(`Question: ${response.data[0].question}`); is logging out the first row of the data array and grabbing the value with the key “question”. Likewise, the next line is doing the same but with the punchline.
And finally, the following bit of code will catch an error in the get request, and do something. In this case, we just log the error.
.catch(function (error) { // handle error console.log(error); }
That’s it! You have just used your first API to get a random joke from the internet!