How to call APIs using Axios in TypeScript?
Instead of building functionality from scratch, there is often an API available that performs similar functions. There are multiple ways we can call such API while working with JavaScript or TypeScript. We can use the native fetch
API or axios
if the API call is on the server.
More and more developers are inlining towards TypeScript these days to build applications. It is because TypeScript extends JavaScript and provides additional features like interfaces and types.
In this piece, we will learn how to use Axios in a TypeScript project. So without any further ado, let's jump in!
Setting Up a TypeScript Project (Globally)
We need to set up TypeScript first in order to use it for building applications.
Install TypeScript
TypeScript is a programming language developed by Microsoft. You need to install it globally on your computer. Assuming that you have Node and Node Package Manager (NPM) installed, go ahead and run the following command on your terminal:
sh
npm install -g typeScript
TypeScript Node (ts-node)
To run TypeScript files with Node, we need to install the ts-node, a TypeScript execution engine, and REPL (Read-Eval-Print Loop) for Node.js.
To install it, please go ahead and run the following command in your terminal:
sh
sudo npm install -g ts-node
Call APIs with TypeScript
Let's do it in steps to make it simple and easy to follow:
STEP 1: Install Axios and Node Types
Please create a directory and open it in your preferred code editor. Now open your project terminal and run the following command to install Axios:
sh
npm install axios
We also need to install TypeScript Node Types as a developer dependency. So go ahead and run the following command in your terminal:
sh
npm i --save-dev @types/node
STEP 2: Find an API
The next step is finding an API that we can call in our TypeScript project. We can head to RapidAPI Hub for this purpose.
We can use the Famous Quotes API in this project to learn how to call API in TypeScript. So go ahead and subscribe to the API.
STEP 3: Call an API in TypeScript
Go ahead and create an index.ts
file in your project directory. We need to import Axios at the top of the file. Let's go ahead and do it.
ts
const axios = require('axios');
Let's now create a function called getQuotes
where we will call the API.
ts
const axios = require('axios');function getQuotes() {}
RapidAPI Hub provides us with code snippets to call an API in multiple languages. We can use the default one, i.e., (Node.js) Axios
. So go ahead and click on the Copy Code button right beside the language dropdown menu.
Once you are done, paste it inside the getQuotes
function we created earlier.
ts
const axios = require('axios');function getQuotes() {const options = {method: 'GET',url: 'https://famous-quotes4.p.rapidapi.com/random',params: { category: 'all', count: '2'},headers: {'X-RapidAPI-Key': 'your-rapidapi-key','X-RapidAPI-Host': 'famous-quotes4.p.rapidapi.com',},};axios.request(options).then(function (response: any) {console.log(response.data);}).catch(function (error: any) {console.error(error);});}
You can see we have an object called options
. Inside it, we have defined a bunch of things like the HTTP method, API endpoint, the query parameters and headers. Afterward, we called axios
request method and provided it with the options
object.
We have used promise-chaining to handle the response and errors.
Lastly, let's call the function.
ts
getQuotes();
STEP 4: Run the TypeScript file
Now, we need to run the file to make the API call. For this, go ahead and run the following command in your project terminal:
sh
ts-node index.ts
This will execute the file, call the API, and display the results on the terminal.
Wrap Up
That's all, folks. We have successfully called an API in TypeScript using Axios. We used RapidAPI Hub to find the API and also utilized one of its code snippets.
If you want to learn more about RapidAPI Hub, I recommend you take a look at this piece.