# Axios
Links: [[Javascript]]
## Differences between [[Axios]] and [[fetch]]
https://www.geeksforgeeks.org/difference-between-fetch-and-axios-js-for-making-http-requests/
Axios | Fetch
------|------
Axios has **url** in request object.|Fetch has **no url** in request object.
Axios is a **stand-alone third party package** that can be easily installed.|Fetch is built into most modern browsers; **no installation** is required as such.
Axios enjoys built-in XSRF protection.|Fetch does not.
Axios uses the **data** property.|Fetch uses the **body** property.
Axios’ data contains the **object**.|Fetch’s body has to be **stringified**.
Axios request is ok when **status is 200** and **statusText is ‘OK’**.|Fetch request is ok when **response object contains the ok property**.
Axios performs **automatic transforms of JSON data**.|Fetch is a **two-step process** when handling JSON data- first, to make the actual request; second, to call the .json() method on the response.
Axios allows **cancelling request and request timeout**.|Fetch does not.
Axios has the ability to **intercept HTTP requests**.|Fetch, by default, doesn’t provide a way to intercept requests.
Axios has **built-in support for download progress**.|Fetch does not support upload progress.
Axios has **wide browser support**.|Fetch only supports Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+ (This is known as Backward Compatibility).
Going to go with [[Axios]] for [[-Projects/-Lightning Router/Lightning Router]] for the purposes of compatibility with older browsers, even though fetch doesn't require an additional install.
## Using Axios to Make HTTP Calls in React
https://www.pluralsight.com/guides/how-to-handle-ajax-with-react
### Installation
```bash
npm install axios
```
```html
<script src="node_modules/axios/dist/axios.min.js"></script>
```
### Basic structure
```js
axios
.get("API_URL")
.then(response => {
// manipulate the response here
})
.catch(function(error) {
// manipulate the error response here
});
```
### Accessing all response properties
```js
async getTodos() {
// With all properties
axios
.get("https://jsonplaceholder.typicode.com/todos?_page=1&_limit=10")
.then(response => {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
})
.catch(function(error) {
console.log(error);
});
}
```
### Adding data to `POST`
```js
async getTodos() {
// With all properties
let body = {
userId: 1111,
title: "This is POST request with body",
completed: true
};
axios
.post("https://jsonplaceholder.typicode.com/todos", body)
.then(function(response) {
console.log(response.data);
})
.catch(function(error) {
console.log(error);
});
}
```
### Complete example
```jsx
import React, { Component } from "react";
import axios from "axios";
class UsingAxios extends Component {
constructor() {
super();
this.state = {
name: "React"
};
this.getTodos = this.getTodos.bind(this);
}
componentDidMount() {
this.getTodos();
}
async getTodos() {
// With all properties
let body = {
userId: 1111,
title: "This is POST request with body",
completed: true
};
axios
.post("https://jsonplaceholder.typicode.com/todos", body)
.then(function(response) {
console.log(response.data);
})
.catch(function(error) {
console.log(error);
});
}
render() {
const { todos } = this.state;
return (
<div>
<h3>Using Axios in React for API call</h3>
<hr />
</div>
);
}
}
export default UsingAxios;
```