# How to use Axios to make HTTP requests in JavaScript
By Atta Ur Rehman Shah (https://attacomsian.com/about). Published May 11, 2019, updated Oct 5, 2022. Topics: JavaScript.
Canonical URL: https://attacomsian.com/blog/axios-javascript
> A practical guide to learning how to use the Axios library in JavaScript to make different HTTP requests.
Axios is an open-source library for making [asynchronous HTTP requests](https://attacomsian.com/blog/http-requests-axios) to REST endpoints in the browser and Node.js. It is a [promise-based](https://attacomsian.com/blog/promises-javascript) HTTP client that can be used in plain JavaScript and in modern JavaScript frameworks like React, Angular and Vue.js, etc.
In this tutorial, we will be using Axios in a JavaScript and HTML5 project. Let's create a new HTML5 project:
```bash
# create and switch to new directory
$ mkdir axios-js && cd axios-js
# create files
$ touch index.html script.js
# open the project in VS Code
$ code .
```
## Installation
Adding Axios to the HTML5 project is easy. You can use the npm package manager or Content Delivery Network (CDN). If you prefer to use the npm package manager, run the following command in your terminal:
```bash
$ npm install axios --save
```
It will download the library in the `node_modules` folder from where you can add it to your project:
```markup
```
The easiest way to include Axios is by using an external CDN:
```markup
```
## User Interface
Let us update our `index.html` file to display a list of users:
index.html
```markup
Axios in JavaScript
```
For running the project, we will be using [http-server](https://www.npmjs.com/package/http-server) - a simple, zero-configuration command-line HTTP server:
```bash
$ http-server -p 3000
```
Now you can visit http://localhost:3000 to view your project.
## GET Request
Let us create a new function in the `script.js` file to fetch a list of users using the GET request. We will use [Reqres REST API](https://reqres.in) for all our examples.
script.js
```javascript
const fetchUsers = () => {
axios
.get('https://reqres.in/api/users')
.then(response => {
const users = response.data.data
console.log(`GET list users`, users)
})
.catch(error => console.error(error))
}
fetchUsers()
```
If you have used jQuery before, understanding the `axios.get()` function is easy. We just pass the endpoint URL as a parameter to this method. The method returns a [promise](https://attacomsian.com/blog/promises-javascript), allowing us to use `then()` and `catch()` methods to handle the result.
When the promise is resolved successfully, you will get a `response` object back. This object has information about the response, such as `headers`, `data`, `config`, `status`, and even a complete `request` object.
Now let us extend our `script.js` file and add a new function that parses the `users` object and add it to DOM:
script.js
```javascript
const createLi = user => {
const li = document.createElement('li')
// add user details to `li`
li.textContent = `${user.id}: ${user.first_name} ${user.last_name}`
return li
}
const appendToDOM = users => {
const ul = document.querySelector('ul')
//iterate over all users
users.map(user => {
ul.appendChild(createLi(user))
})
}
const fetchUsers = () => {
axios
.get('https://reqres.in/api/users')
.then(response => {
const users = response.data.data
console.log(`GET list users`, users)
// append to DOM
appendToDOM(users)
})
.catch(error => console.error(error))
}
fetchUsers()
```
## POST Request
We can add a new user to our REST API with the `axios.post()` method. Just add a new function `createUsers()` inside of `script.js`:
```javascript
const createUser = user => {
axios
.post('https://reqres.in/api/users', user)
.then(response => {
const addedUser = response.data
console.log(`POST: user is added`, addedUser)
// append to DOM
appendToDOM([addedUser])
})
.catch(error => console.error(error))
}
```
To create a new user, you need to add a `