diff --git a/main.js b/main.js index 83d2e150..6867d221 100644 --- a/main.js +++ b/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) {