TypeScript for FrontEnd developers

It helps simplify communication with remote servers by abstracting away the complexity of the XMLHttpRequest API (or fetch), making it easier to send asynchronous requests, handle responses, and manage errors.

It's very popular and used especially in the React ecosystem

# Get

The following snippet demonstrates a basic use of axios to fetch data from an external API—in this case, the users endpoint from the jsonplaceholder.typicode.com service.

The code sends a GET request to retrieve a list of users, logs the result to the console, and handles potential errors gracefully:

index.ts

# Get and Types

We can explicitly define the response type and handle it accordingly.

The following snippet demonstrates a basic use of axios to fetch data from an external API—in this case, the users endpoint from the jsonplaceholder.typicode.com service.

The code sends a GET request to retrieve a list of users, logs the result to the console, and handles potential errors gracefully:

There are problems using axios with StackBlitz so the playground will not be typed correctly

index.ts

# Post

The following code snippet demonstrates how to send a POST request using axios to create a new user with the name "Fabio":

index.ts

# Delete

This code demonstrates how to send a DELETE request using axios to remove the user with ID 1 and logs a confirmation message upon success.

index.ts

# Patch

This code demonstrates how to send a PATCH request using axios to update the name of the user with ID 1 to Fabio and logs the updated user data upon success:

index.ts

React

Topics

Courses

Bookmarks

there are no topics

Home•Blog•Login•Register

Send your feedback

Fetch data with Axios (+ React example)

Use axios to GET, POST, DELETE and PATCH in TypeScript and React

6 snippets

15 mins

Fabio Biondi

Google Developer Expert
Microsoft MVP

What is axios?

Axios is a popular JavaScript library used to make HTTP requests from the browser or Node.js.

It provides a simple, promise-based API for handling various types of HTTP methods like GET, POST, PUT, DELETE, and more.

It's very popular and used especially in the React ecosystem

# Get

The following snippet demonstrates a basic use of axios to fetch data from an external API—in this case, the users endpoint from the jsonplaceholder.typicode.com service.

The code sends a GET request to retrieve a list of users, logs the result to the console, and handles potential errors gracefully:

index.ts

# Get and Types

We can explicitly define the response type and handle it accordingly.

The following snippet demonstrates a basic use of axios to fetch data from an external API—in this case, the users endpoint from the jsonplaceholder.typicode.com service.

The code sends a GET request to retrieve a list of users, logs the result to the console, and handles potential errors gracefully:

There are problems using axios with StackBlitz so the playground will not be typed correctly

index.ts

# Post

The following code snippet demonstrates how to send a POST request using axios to create a new user with the name "Fabio":

index.ts

# Delete

This code demonstrates how to send a DELETE request using axios to remove the user with ID 1 and logs a confirmation message upon success.

index.ts

# Patch

This code demonstrates how to send a PATCH request using axios to update the name of the user with ID 1 to Fabio and logs the updated user data upon success:

index.ts

React

Unblock the content

It's completely free!

Don’t have an account yet?

Forgot password?

Or did you not receive
the CONFIRMATION email?

# React & axios

Here's an example of how to load data using axios in a React component with hooks (like useEffect and useState).

We'll fetch the data from https://jsonplaceholder.typicode.com/users and display it in the UI.

src/App.tsx

Topics

Courses

Bookmarks

there are no topics

Home•Blog•Login•Register