Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Done everything based on video #21

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Done everything based on video #21

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 136 additions & 10 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,51 +1,177 @@
// AXIOS GLOABAL
axios.defaults.headers.common[`X-Auth-Token`] = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';

// GET REQUEST
function getTodos() {
console.log('GET Request');
// axios({
// method: 'get',
// url:'https://jsonplaceholder.typicode.com/todos',
// params:{
// _limit:5
// }
// })
// .then(res=> showOutput(res))
// .catch(err=>console.error(err));
axios
.get('https://jsonplaceholder.typicode.com/todos?_limit=5',{timeout: 5000})
.then(res=> showOutput(res))
.catch(err=>console.error(err));
}

// POST REQUEST
function addTodo() {
console.log('POST Request');
// axios({
// method: 'post',
// url:'https://jsonplaceholder.typicode.com/todos',
// data:{
// title:`New Todo by Mufil`,
// completed: false
// }
// })
// .then(res=> showOutput(res))
// .catch(err=>console.error(err));
axios.post('https://jsonplaceholder.typicode.com/todos',{
title:`New Todo by Mufil`,
completed: false
})
.then(res => showOutput(res))
.catch(err=> console.error(err));
}

// PUT/PATCH REQUEST
function updateTodo() {
console.log('PUT/PATCH Request');
// axios.put('https://jsonplaceholder.typicode.com/todos/1',{
// title:`Updated Todo by Mufil`,
// completed: true
// })
// .then(res => showOutput(res))
// .catch(err=> console.error(err));
axios.patch('https://jsonplaceholder.typicode.com/todos/1',{
title:`Updated Todo by Mufil`,
completed: true
})
.then(res => showOutput(res))
.catch(err=> console.error(err));
}

// DELETE REQUEST
function removeTodo() {
console.log('DELETE Request');
axios.delete('https://jsonplaceholder.typicode.com/todos/1')
.then(res => showOutput(res))
.catch(err=> console.error(err));
}

// SIMULTANEOUS DATA
function getData() {
console.log('Simultaneous Request');
axios.all([
axios.get(`https://jsonplaceholder.typicode.com/todos?_limit=5`),
axios.get("https://jsonplaceholder.typicode.com/posts?_limit=5")
])
// .then(res=>{
// console.log(res[0]);
// console.log(res[1]);
// showOutput(res[1])
// })
.then(axios.spread((todos,posts) => showOutput(posts) ))
.catch(err =>console.error(err));
}

// CUSTOM HEADERS
function customHeaders() {
console.log('Custom Headers');
const config ={
headers:{
'Content-Type': 'application/json',
'Authorization':'sometoken'
}
}
axios.post('https://jsonplaceholder.typicode.com/todos',{
title:`New Todo by Mufil`,
completed: false
},config
)
.then(res => showOutput(res))
.catch(err=> console.error(err));
}

// TRANSFORMING REQUESTS & RESPONSES
function transformResponse() {
console.log('Transform Response');
const options = {
method: `post`,
url: `https://jsonplaceholder.typicode.com/todos`,
data: {
title:"Transforming Response"
},
transformResponse: axios.defaults.transformResponse.concat(data=>{
data.title = data.title.toUpperCase();
return data;
})
}
axios(options).then(res => showOutput(res))
}

// ERROR HANDLING
function errorHandling() {
console.log('Error Handling');
axios
.get('https://jsonplaceholder.typicode.com/todoss',{
// validateStatus: function(status){
// return status < 500
//Reject only if status is greater or equal to 500
// }
})
.then(res=> showOutput(res))
.catch(err=>{
if(err.response){
//Server responsed with a status other than 200 rage
console.log(err.response.data);
console.log(err.response.status);
console.log(err.response.headers);
if(err.response.status===404){
alert(`Error: Page Not Found`);
}
else if(err.request){
//Request was made but no response
console.log(err.request);
}
else{
console.log(err.message);
}
}
});
}

// CANCEL TOKEN
function cancelToken() {
console.log('Cancel Token');
const source = axios.CancelToken.source();

axios
.get('https://jsonplaceholder.typicode.com/todos',{
cancelToken : source.token
})
.then(res => showOutput(res))
.catch(thrown => {
if(axios.isCancel(thrown)){
console.log("Operation canceled",thrown.message);
}
});
if(true){
source.cancel(`Request canceled`);
}
}

// INTERCEPTING REQUESTS & RESPONSES

axios.interceptors.request.use((config)=>{
console.log(`${config.method.toUpperCase()} request send to ${config.url} at ${new Date().getTime()}`);
return config
}, error =>{
return Promise.reject(error);
})
// AXIOS INSTANCES
const axioInstances = axios.create({
//Other sustom settings
baseURL : 'https://jsonplaceholder.typicode.com'
})

// axioInstances.get('/comments?_limit=5').then(res=> showOutput(res));

// Show output in browser
function showOutput(res) {
Expand Down