In TypeScript/JavaScript, we have an unopinionated library that can help us interact with RESTful APIs, Axios. In this article, we’ll look at the popular open-source library and how it compares with the native browser function(fetch) and we’ll discover the additional features that the open-source library has over fetch. We will also look at how we can interact with a REST API using function-based components.

Axios is a very popular promise-based HTTP client over fetch because it:

• Allows cancelling of requests.
• Allows request timeout.
• Enjoys built-in XSRF protection.
• Performs automatic transforms of JSON data.
• Has wide browser support etc.

On the other hand, TypeScript is an open-source superset of JavaScript that can help us avoid painful bugs that developers commonly run into when writing JavaScript by type-checking the code. The type system increases the code quality, readability, and makes it easy to maintain and refactor the codebase. More importantly, errors can be caught at compile time rather than at runtime.

TypeScript has :

• Over 14,000,000 weekly downloads on npm.
• Over 65,000 stars on GitHub.
• Over 1,700 releases to date.
• Over 18,000 dependent packages.
• And it’s been around for some good 8 years now.

We’ll need

• jsonplaceholder.typicode.com: We will use this online service to help us learn how to interact with a RESTful API.

First things first, let’s bootstrap a typescript and react project using create-react-app. Navigate to your projects folder or anywhere you want to place the project folder on your machine and run the command below.

npx create-react-app my-api --template typescript

Please note that I’ll keep using yarn for adding dependencies throughout this article. However, you should feel free to use npm.

Move into the project directory and add Axios. Note that Axios has got typescript types within it so we don’t have to install them separately.

yarn add axios

#react #react-hook #axios #typescript #javascript