Many projects on the web need to interface with a REST API at some stage in their development. Axios is a lightweight HTTP client based on the $http
service within Angular.js v1.x and is similar to the native JavaScript Fetch API.
Axios is promise-based, which gives you the ability to take advantage of JavaScript’s async
and await
for more readable asynchronous code.
You can also intercept and cancel requests, and there’s built-in client-side protection against cross-site request forgery.
In this article, you will see examples of how to use Axios to access the popular JSON Placeholder API within a React application.
To follow along with this article, you’ll need the following:
This tutorial was verified with Node.js v16.13.1, npm v8.1.4, react
v17.0.2, and axios
v0.24.0.
Need to deploy a React project and have it live? Check out DigitalOcean App Platform and deploy a React project directly from GitHub in minutes.
In this section, you will add Axios to a React project you created following the How to Set up a React Project with Create React App tutorial.
- npx create-react-app react-axios-example
To add Axios to the project, open your terminal and change directories into your project:
- cd react-axios-example
Then run this command to install Axios:
- npm install axios@0.24.0
Next, you will need to import Axios into the file you want to use it in.
GET
RequestIn this example, you create a new component and import Axios into it to send a GET
request.
Inside your React project, you will need to create a new component named PersonList
.
First, create a new components
subdirectory in the src
directory:
- mkdir src/components
In this directory, create PersonList.js
and add the following code to the component:
import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
persons: []
}
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
const persons = res.data;
this.setState({ persons });
})
}
render() {
return (
<ul>
{
this.state.persons
.map(person =>
<li key={person.id}>{person.name}</li>
)
}
</ul>
)
}
}
First, you import React and Axios so that both can be used in the component. Then you hook into the componentDidMount
lifecycle hook and perform a GET
request.
You use axios.get(url)
with a URL from an API endpoint to get a promise which returns a response object. Inside the response object, there is data that is then assigned the value of person
.
You can also get other information about the request, such as the status code under res.status
or more information inside of res.request
.
Add this component to your app.js
:
import PersonList from './components/PersonList.js';
function App() {
return (
<div ClassName="App">
<PersonList/>
</div>
)
}
Then run your application:
- npm start
View the application in the browser. You will be presented with a list of 10 names.
POST
RequestIn this step, you will use Axios with another HTTP request method called POST
.
Inside your React project, you will need to create a new component named PersonAdd
.
Create PersonAdd.js
and add the following code to create a form that allows for user input and subsequently POST
s the content to an API:
import React from 'react';
import axios from 'axios';
export default class PersonAdd extends React.Component {
state = {
name: ''
}
handleChange = event => {
this.setState({ name: event.target.value });
}
handleSubmit = event => {
event.preventDefault();
const user = {
name: this.state.name
};
axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
.then(res => {
console.log(res);
console.log(res.data);
})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Person Name:
<input type="text" name="name" onChange={this.handleChange} />
</label>
<button type="submit">Add</button>
</form>
</div>
)
}
}
Inside the handleSubmit
function, you prevent the default action of the form. Then update the state
to the user
input.
Using POST
gives you the same response object with information that you can use inside of a then
call.
To complete the POST
request, you first capture the user
input. Then you add the input along with the POST
request, which will give you a response. You can then console.log
the response, which should show the user
input in the form.
Add this component to your app.js
:
import PersonList from './components/PersonList';
import PersonAdd from './components/PersonAdd';
function App() {
return (
<div ClassName="App">
<PersonAdd/>
<PersonList/>
</div>
)
}
Then run your application:
- npm start
View the application in the browser. You will be presented with a form for submitting new users. Check the console after submitting a new user.
DELETE
RequestIn this example, you will see how to delete items from an API using axios.delete
and passing a URL as a parameter.
Inside your React project, you will need to create a new component named PersonRemove
.
Create PersonRemove.js
and add the following code to delete a user:
import React from 'react';
import axios from 'axios';
export default class PersonRemove extends React.Component {
state = {
id: ''
}
handleChange = event => {
this.setState({ id: event.target.value });
}
handleSubmit = event => {
event.preventDefault();
axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
.then(res => {
console.log(res);
console.log(res.data);
})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Person ID:
<input type="number" name="id" onChange={this.handleChange} />
</label>
<button type="submit">Delete</button>
</form>
</div>
)
}
}
Again, the res
object provides you with information about the request. You can then console.log
that information again after the form is submitted.
Add this component to your app.js
:
import PersonList from './components/PersonList';
import PersonAdd from './components/PersonAdd';
import PersonRemove from './components/PersonRemove';
function App() {
return (
<div ClassName="App">
<PersonAdd/>
<PersonList/>
<PersonRemove/>
</div>
)
}
Then run your application:
- npm start
View the application in the browser. You will be presented with a form for removing users.
In this example, you will see how you can set up a base instance in which you can define a URL and any other configuration elements.
Create a separate file named api.js
:
- nano src/api.js
Export a new axios
instance with these defaults:
import axios from 'axios';
export default axios.create({
baseURL: `http://jsonplaceholder.typicode.com/`
});
Once the default instance is set up, it can then be used inside of the PersonRemove
component. You import the new instance like this:
import React from 'react';
import API from '../api';
export default class PersonRemove extends React.Component {
// ...
handleSubmit = event => {
event.preventDefault();
API.delete(`users/${this.state.id}`)
.then(res => {
console.log(res);
console.log(res.data);
})
}
// ...
}
Because http://jsonplaceholder.typicode.com/
is now the base URL, you no longer need to type out the whole URL each time you want to hit a different endpoint on the API.
async
and await
In this example, you will see how you can use async
and await
to work with promises.
The await
keyword resolves the promise
and returns the value
. The value
can then be assigned to a variable.
import React from 'react';
import API from '../api';
export default class PersonRemove extends React.Component {
// ...
handleSubmit = event => {
event.preventDefault();
const response = await API.delete(`users/${this.state.id}`);
console.log(response);
console.log(response.data);
}
// ...
}
In this code sample, the .then()
is replaced. The promise
is resolved, and the value is stored inside the response
variable.
In this tutorial, you explored several examples on how to use Axios inside a React application to create HTTP requests and handle responses.
If you’d like to learn more about React, check out the How To Code in React.js series, or check out the React topic page for more exercises and programming projects.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Sign up for Infrastructure as a Newsletter.
Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
For the last part, isn’t “await” need to use inside async function? Sorry I’m a javascript newbie…
For the last part, isn’t “await” need to use inside async function? Sorry I’m a javascript newbie…
Great article! I saw it’s using class component. Are there any updates to use the newer react version that uses functional component?
nice tutorial on how to use axios with React
A good shot,Thanks really enjoyed it