Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pktcodes/axios-basics-v2
Axios Basics using React
https://github.com/pktcodes/axios-basics-v2
axios create-react-app custom-instance get global-defaults headers interceptors javascript john-smilga netlify post react request response
Last synced: 3 days ago
JSON representation
Axios Basics using React
- Host: GitHub
- URL: https://github.com/pktcodes/axios-basics-v2
- Owner: pktcodes
- Created: 2023-09-06T04:55:25.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-09-15T05:52:09.000Z (over 1 year ago)
- Last Synced: 2024-11-08T23:58:24.589Z (about 2 months ago)
- Topics: axios, create-react-app, custom-instance, get, global-defaults, headers, interceptors, javascript, john-smilga, netlify, post, react, request, response
- Language: JavaScript
- Homepage: https://react-axios-basics-v2-prod.netlify.app
- Size: 182 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Axios
#### Docs
[Axios Docs](https://axios-http.com/docs/intro)
#### Install
```sh
npm install axios
```
```js
```
#### First Request
- import axios
- axios.get(url)
- axios.post(url)
- axios.patch/put(url)
- axios.delete(url)
- default get axios(url)
- returns a promise
- response data located in data property
- error in error.response
```js
import axios from 'axios';
const fetchData = async () => {
try {
// axios.get(), axios.post(),axios.put(), axios.delete()
const response = await axios(url);
console.log(response);
} catch (error) {
console.log(error.response);
}
};
```
#### Headers
- second argument
- axios.get(url,{})
- third argument in requests with data
- axios.post(url,{data},{})
```js
const fetchDadJoke = async () => {
try {
const { data } = await axios(url, {
headers: {
Accept: 'application/json',
},
});
// console.log(data);
setJoke(data.joke);
} catch (error) {
console.log(error.response);
}
};
```
#### Post Request
- send data to the server
- axios.post(url, { data })
- more options (auth header) - axios.post(url, { data },{})
```js
try {
const resp = await axios.post(url, { data });
} catch (error) {
console.log(error.response.data);
}
```
#### Global Defaults
```js
// In latest axios version common property returns "undefined"
// axios.defaults.headers.common['Accept'] = 'application/json';
axios.defaults.headers['Accept'] = 'application/json';
axios.defaults.baseURL = 'https://api.example.com';
// In latest axios version common property returns "undefined"
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] =
'application/x-www-form-urlencoded';
```
#### Custom Instance
```js
const authFetch = axios.create({
baseURL: 'https://course-api.com',
headers: {
Accept: 'application/json',
},
});
```
#### Interceptors
- global and custom
```js
authFetch.interceptors.request.use(
(request) => {
// request.headers.common['Accept'] = `application/json`;
request.headers['Accept'] = `application/json`;
console.log('request sent');
// must return request
return request;
},
(error) => {
return Promise.reject(error);
}
);
authFetch.interceptors.response.use(
(response) => {
console.log('got response');
return response;
},
(error) => {
console.log(error.response);
if (error.response.status === 404) {
// do something
console.log('NOT FOUND');
}
return Promise.reject(error);
}
);
```
##### Update
In the latest version there is no common property
```js
// In latest axios version common property returns "undefined"
// axios.defaults.headers.common['Accept'] = 'application/json';
axios.defaults.headers['Accept'] = 'application/json';
// In latest axios version common property returns "undefined"
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers['Authorization'] = AUTH_TOKEN;
```
```js
// request.headers.common['Accept'] = `application/json`;
request.headers['Accept'] = `application/json`;
```
---
_Note: I have developed this project as part of React 18 Tutorial and Projects Course (2023) taught by John Smilga._