axios commands working

main.js

@@ -1,51 +1,179 @@
+//AXIOS GLOBALS
+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.log(err));
+  // just axios is enough because it takes get request by default
+  axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5',{timeout:5000})
+  .then(res => showOutput(res))
+  .catch(err =>console.log(err));
 }
 
 // POST REQUEST
 function addTodo() {
-  console.log('POST Request');
+  axios.post('https://jsonplaceholder.typicode.com/todos/',{
+    title : 'New Todo',
+    completed: false
+  })
+  .then(res => showOutput(res))
+  .catch(err =>console.log(err));
 }
 
 // PUT/PATCH REQUEST
+//put will update entire resource where as patch will update incrementally
 function updateTodo() {
-  console.log('PUT/PATCH Request');
+  axios.patch('https://jsonplaceholder.typicode.com/todos/1',{
+    title:'Updated Todo',
+    completed:true
+  })
+  .then(res => showOutput(res))
+  .catch(err =>console.log(err));
 }
 
 // DELETE REQUEST
 function removeTodo() {
-  console.log('DELETE Request');
+  axios.patch('https://jsonplaceholder.typicode.com/todos/1')
+  .then(res => showOutput(res))
+  .catch(err =>console.log(err));
 }
 
 // SIMULTANEOUS DATA
+//get posts and todos at once  we can use axios.all
 function getData() {
-  console.log('Simultaneous Request');
+  // axios.all([
+  //   axios.get('https://jsonplaceholder.typicode.com/todos'),
+  //   axios.get('https://jsonplaceholder.typicode.com/posts')
+  // ])
+  // .then(res=>{
+  //   console.log(res[0]);
+  //   console.log(res[1]);
+  //   showOutput(res[1]);
+  // })
+  //use axios.spread inside then for better use of variables and better naming
+
+  axios.all([
+    axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5'),
+    axios.get('https://jsonplaceholder.typicode.com/posts?_limit=5')
+  ])
+  .then(axios.spread((todos, posts) => showOutput(posts)))
+  .catch(err=>console.log(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',
+    completed: false
+  }, 
+  config
+  )
+  .then(res => showOutput(res))
+  .catch(err =>console.log(err));
 }
 
+
 // TRANSFORMING REQUESTS & RESPONSES
 function transformResponse() {
-  console.log('Transform Response');
+  const options = {
+    method: 'post',
+    url: 'https://jsonplaceholder.typicode.com/todos',
+    data: {
+      title:'Hello world'
+    },
+    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?_limit=5',{
+    // 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 responded with a status other than 200 range
+      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.error(err.request);
+    } else {
+      console.error(err.message);
+    }
+  });
 }
 
 // CANCEL TOKEN
 function cancelToken() {
-  console.log('Cancel Token');
+  const source = axios.CancelToken.source();
+
+  axios.get('https://jsonplaceholder.typicode.com/todoss?_limit=5',{
+    cancelToken:source.token
+  })
+  .then(res => showOutput(res))
+  .catch(thrown => {
+    if(axios.isCancel(thrown)){
+      console.log('Request Cancelled!', thrown.message);
+    }
+  });
+
+  if(true){
+    source.cancel('Request cancelled');
+  }
 }
 
 // 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 axiosInstances = axios.create({
+  //Other custom settings
+  baseURL: 'https://jsonplaceholder.typicode.com/todoss'
+});
+
+//axiosInstances.get('/comments').then(res => showOutput(res));
+
 
 // Show output in browser
 function showOutput(res) {