Axios in React TypeScript: A Beginner’s Guide

Hey guys! Ever wondered how to fetch data in your React TypeScript projects? Well, look no further! This article is all about how to use Axios – a super popular and easy-to-use library – to make HTTP requests in your React TypeScript applications. We’ll cover everything from the basics to some more advanced stuff, ensuring you can confidently integrate Axios into your projects. So, let’s dive in and see how we can make our React apps talk to the outside world!

What is Axios?

First things first, what exactly is Axios? In a nutshell, Axios is a promise-based HTTP client for making requests to external APIs. Think of it as a friendly messenger that helps your React app communicate with other servers on the web. It’s designed to be used in both the browser and Node.js, making it super versatile. Now, why choose Axios over other options? Well, it offers several advantages. First, it automatically transforms JSON data, which is super convenient. It also has built-in support for features like intercepting requests and responses, handling request cancellation, and protecting against Cross-Site Request Forgery (CSRF). It is a well-established and reliable library, making it a solid choice for any React TypeScript project. Axios is a powerful HTTP client, especially when working with APIs. It makes the process of making HTTP requests in your React TypeScript apps much more straightforward, so you can focus on building amazing features!

Axios is like a Swiss Army knife for HTTP requests, offering a plethora of features that make your life easier. It supports all the major HTTP methods: GET , POST , PUT , DELETE , and more. It also allows you to set request configurations, such as headers, timeouts, and authentication. It handles errors gracefully, providing you with meaningful error messages and allowing you to implement robust error-handling strategies. Plus, it’s easy to use and integrates seamlessly with React and TypeScript. In fact, it provides TypeScript definitions out of the box, which means you get type safety and autocompletion, making your code cleaner and less prone to errors. You can use it in any React TypeScript project that needs to fetch data from an API, submit forms, or interact with any external server. Its promise-based API ensures that you can handle asynchronous operations elegantly, without getting bogged down in callback hell. So, if you’re building a modern web application, chances are, you’ll be using Axios.

Setting Up Your Project

Alright, let’s get our hands dirty and set up a basic React TypeScript project. If you’re starting from scratch, the easiest way to do this is by using Create React App (CRA). Make sure you have Node.js and npm (or yarn) installed on your system. Open your terminal and run the following command to create a new React TypeScript project:

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

Replace my-axios-app with the name you want to give your project. This command will set up a new React app with all the necessary TypeScript configurations. Now, navigate into your project directory:

cd my-axios-app

Next, install Axios. This is super easy; use either npm or yarn:

npm install axios
# or
yarn add axios

This command adds Axios to your project’s dependencies. Finally, let’s start the development server:

npm start
# or
yarn start

This will open your React app in your browser, and you should see the default Create React App welcome screen. From here, you’re all set to start using Axios in your project. This setup process prepares your project environment and ensures that you have everything you need to start making HTTP requests. The installation of Axios is crucial since it allows your application to interact with external APIs. With the development server running, you can now start writing code and see your app come to life!

Making Your First GET Request

Let’s start with the basics: making a GET request. We’ll fetch some data from a public API and display it in our app. Open src/App.tsx and replace the contents with the following code. This code will fetch data from a sample API (jsonPlaceholder) and display it within our application. Start by importing axios at the top of your App.tsx file:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState<any[]>([]); // Using any[] for simplicity

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => {
        setData(response.data);
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div className="App">
      <h1>Posts</h1>
      {data.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
}

export default App;

Here’s what’s going on, line by line. First, we import React , useState , useEffect from ‘react’, and axios from ‘axios’. We then define a functional component called App . Inside the component, we use the useState hook to manage the data we fetch. We initialize data as an empty array, and we use any[] as the type for simplicity. Then, we use the useEffect hook to perform the data fetching. The useEffect hook runs after the component renders. Inside useEffect , we call axios.get() to make a GET request to the specified API endpoint. The .then() method handles the response, and we call setData() to update the state with the fetched data. If there’s an error, the .catch() method catches it, and we log the error to the console. Finally, we render the fetched data in the return statement using the map() function to display each post’s title and body. This straightforward example demonstrates how to perform a GET request using Axios and display the results in your React app. It is a fundamental building block for interacting with APIs and fetching data dynamically.

Handling POST Requests

Now, let’s explore how to make a POST request. POST requests are typically used to send data to a server, such as submitting a form or creating a new resource. To illustrate this, let’s create a simple form and send some data to the same sample API (which, in reality, won’t store the data, but it will simulate a successful POST request). First, let’s add a state to handle the form inputs. Add this inside your App component, above the useEffect hook:

const [title, setTitle] = useState('');
const [body, setBody] = useState('');

Then, add these functions to handle input changes:

const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setTitle(e.target.value);
};

const handleBodyChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
  setBody(e.target.value);
};

Next, add this function to handle the form submission:

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();
  try {
    const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
      title,
      body,
      userId: 1, // Optional, depending on the API
    });
    console.log('Post created:', response.data);
    // Optionally, update the data state with the new post:
    setData(prevData => [...prevData, response.data]);
    setTitle(''); // Clear the input fields
    setBody('');
  } catch (error) {
    console.error('Error creating post:', error);
  }
};

Finally, add the form to your JSX:

<form onSubmit={handleSubmit}>
  <label htmlFor="title">Title:</label>
  <input type="text" id="title" value={title} onChange={handleTitleChange} />
  <br />
  <label htmlFor="body">Body:</label>
  <textarea id="body" value={body} onChange={handleBodyChange} />
  <br />
  <button type="submit">Create Post</button>
</form>

Here’s how it works. We added state variables for the title and body, as well as change handlers for the input fields. The handleSubmit function prevents the default form submission behavior and sends a POST request to the API. We pass an object containing the title, body, and an optional userId to the axios.post() method. If the request is successful, we log the response data and optionally update our local data state with the newly created post and clear the input fields. If there’s an error, we log it to the console. This example shows you the essentials of making POST requests, allowing you to create and send data to an API using Axios.

Adding Types and Error Handling

Let’s enhance our code with TypeScript types and robust error handling. This will make your code more readable, maintainable, and less prone to errors. First, let’s define some types. Create a new file called types.ts in your src directory and add the following code:

export interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

This interface describes the structure of a post object, which is what we are expecting from the API. Now, go back to App.tsx and import this type:

import { Post } from './types';

Then, update your useState hook for data to use this type:

const [data, setData] = useState<Post[]>([]);

This tells TypeScript that data is an array of Post objects. Now, let’s improve our error handling. Modify the .catch() block in your GET request to handle different error scenarios:

.catch(error => {
  if (error.response) {
    // The request was made and the server responded with a status code
    // that falls out of the range of 2xx
    console.error('Error status:', error.response.status);
    console.error('Error data:', error.response.data);
    console.error('Error headers:', error.response.headers);
  } else if (error.request) {
    // The request was made but no response was received
    // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
    // http.ClientRequest in node.js
    console.error('Error request:', error.request);
  } else {
    // Something happened in setting up the request that triggered an Error
    console.error('Error message:', error.message);
  }
  console.error('Error config:', error.config);
});

By checking error.response , error.request , and error.message , we can handle different types of errors more effectively. This will help you identify the root cause of the error. This is a crucial aspect of developing robust and reliable applications. Furthermore, use these techniques to improve the handling of POST requests as well. You will find that these additions not only improve the clarity and maintainability of your code but also significantly enhance your debugging capabilities. Always try to catch and handle errors gracefully.

Configuring Axios

Axios allows you to configure global settings, like setting a default base URL, setting headers, or setting a timeout. This is useful for avoiding repetitive code and managing configurations in a central place. Let’s configure a default base URL. Create a new file called axios.ts in your src directory and add the following code:

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  timeout: 10000, // 10 seconds
  headers: {
    'Content-Type': 'application/json',
  },
});

export default instance;

Here, we create a new Axios instance using axios.create() . We set the baseURL , timeout , and default headers. Now, we can import and use this instance in App.tsx instead of importing and configuring Axios directly. Replace the import statement in App.tsx :

import axios from './axios'; // Import our configured instance

Then, use the axios instance when making requests. For example, change the GET request like so:

axios.get('/posts') // Notice the absence of the full URL

Using this setup makes our code cleaner and easier to maintain. Any changes to the base URL or default headers only need to be updated in one place. These configurations are very valuable when interacting with APIs, especially when dealing with multiple API calls. Configuring Axios globally helps you manage HTTP requests and response globally throughout your application, resulting in a more organized and maintainable code base. It’s also easier to debug, as all requests will follow the same configuration.

Interceptors

Axios interceptors are a powerful feature that allows you to intercept and modify requests before they are sent and responses before they are handled by your code. This is very useful for tasks like adding authentication headers, logging requests, or handling errors globally. Let’s see how they work. Go to your axios.ts file and add the following code after the axios.create configuration:

// Add a request interceptor
instance.interceptors.request.use(
  config => {
    // Do something before request is sent
    console.log('Request sent:', config.method, config.url);
    return config;
  },
  error => {
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
instance.interceptors.response.use(
  response => {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    console.log('Response received:', response.status, response.config.url);
    return response;
  },
  error => {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  }
);

Here, we added two interceptors: a request interceptor and a response interceptor. The request interceptor logs the method and URL of each request before it is sent. The response interceptor logs the status code and URL of each response. With this configuration in place, you’ll see logs in your console every time a request is made and a response is received. Interceptors allow you to centralize cross-cutting concerns like authentication, logging, and error handling. Implementing these features in your application can help increase the overall effectiveness and reliability of your code, making it a valuable tool in any React TypeScript project.

Conclusion

Alright, folks, that’s a wrap! You’ve learned the basics of using Axios in your React TypeScript projects. We’ve covered how to install Axios, make GET and POST requests, handle data, add types, implement error handling, configure Axios, and use interceptors. This should give you a solid foundation for working with APIs in your React applications. Remember to always handle errors, and make use of TypeScript to get the best type safety and maintainability. Keep practicing, and you’ll become a pro in no time! Happy coding and have a blast with your React TypeScript journey! Thanks for reading and happy coding, guys!