diff --git a/index.html b/index.html index 826867cd..ca0d4dd7 100644 --- a/index.html +++ b/index.html @@ -21,18 +21,10 @@

Axios Crash Course

- - - - + + + +
diff --git a/main.js b/main.js index 83d2e150..6411a122 100644 --- a/main.js +++ b/main.js @@ -1,52 +1,188 @@ +//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((response) => showOutput(response)) + // .catch((err)=>console.log(err)); + // console.log('GET Request'); + + ////// Shortening the above request ///////// + + axios + .get('https://jsonplaceholder.typicode.com/todos?_limit=5',{timeout: 2000}) + .then((response) => showOutput(response)) + .catch((err) => console.log(err)); + + //console.log('GET Request'); } -// POST REQUEST +// POST REQUEST -- //Gives Output with new Todo and ID attached from server function addTodo() { - console.log('POST Request'); + axios + .post('https://jsonplaceholder.typicode.com/todos',{title:'New Todo',completed:false}) + .then((response) => showOutput(response)) + .catch((err)=>console.log(err)); + + //console.log('POST Request'); } // PUT/PATCH REQUEST function updateTodo() { - console.log('PUT/PATCH Request'); + // axios + // .put('https://jsonplaceholder.typicode.com/todos/1', { //Needs id of ToDo to UPDATE -- Replace Everything + // title: 'Updated Todo', completed: true //Gives Output with new Todo and ID attached from server + // }) + // .then((response) => showOutput(response)) + // .catch((err) => console.log(err)) + + axios + .patch('https://jsonplaceholder.typicode.com/todos/1', { //Needs id of ToDo to UPDATE -- Replace Everything + title: 'Updated Todo', completed: true //Gives Output with new Todo and ID attached from server + }) + .then((response) => showOutput(response)) + .catch((err) => console.log(err)) + + //console.log('PUT/PATCH Request'); } // DELETE REQUEST function removeTodo() { - console.log('DELETE Request'); + + axios + .delete('https://jsonplaceholder.typicode.com/todos/1') + .then((response) => showOutput(response)) + .catch((err) => console.log(err)) + + //console.log('DELETE Request'); } // SIMULTANEOUS DATA function getData() { - console.log('Simultaneous Request'); + + axios.all([ + axios.get('https://jsonplaceholder.typicode.com/todos'), + axios.get('https://jsonplaceholder.typicode.com/posts?_limit=5') + ]).then(axios.spread((todos,posts)=>showOutput(posts))) //gives ability to give Var names to axios.all array Promise outputs + .catch((err)=>console.error(err)); + + //console.log('Simultaneous Request'); } // CUSTOM HEADERS function customHeaders() { - console.log('Custom Headers'); + const config={ + headers:{ + 'Content-Type':'application/json', + Authorization:'someJWTtoken' + } + } + + axios + .post('https://jsonplaceholder.typicode.com/todos', { + title: 'New Todo', completed: false //Gives Output with new Todo and ID attached from server + },config + ) + .then((response) => showOutput(response)) + .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)); //Making axios request with options object holding method url data etc + + //console.log('Transform Response'); } // ERROR HANDLING function errorHandling() { - console.log('Error Handling'); + axios //or axios('https://jsonplaceholder.typicode.com/todoss') + .get('https://jsonplaceholder.typicode.com/todoss',{ + // validateStatus: function(status){ + // return status<500; //Reject only if Status>=500 + // } + }) + .then((response) => showOutput(response)) + .catch((err) => { + if(err.response){ + //Server response status 200 + 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 there's no response + console.error(err.request); + } + else{ + console.error(err.message); + } + } + }); + + //console.log('Error Handling'); } // CANCEL TOKEN function cancelToken() { - console.log('Cancel Token'); -} + const source = axios.CancelToken.source(); + axios //or axios.get + .get('https://jsonplaceholder.typicode.com/todos',{ + cancelToken: source.token + }) + .then((response) => showOutput(response)) + .catch(thrown=>{ + if(axios.isCancel(thrown)){ + console.log('Request Canceled',thrown.message) + } + }); + if(true){ + source.cancel('Request Cancelled!') + } -// INTERCEPTING REQUESTS & RESPONSES + //console.log('Cancel Token'); +} +// INTERCEPTING REQUESTS & RESPONSES -- To Track/intercept requests - Log type URL and Time when the request was made +axios.interceptors.request.use(config=>{ + console.log(`${config.method.toUpperCase()} request sent to ${config.url} at ${new Date().getTime()}`); + return config; +}, +error=>{ + return Promise.reject(error); +}) // AXIOS INSTANCES +const axiosInstance = axios.create({ + //other custom settings + baseURL: 'https://jsonplaceholder.typicode.com' +}); + +axiosInstance.get('/comments').then(res=>showOutput(res)).catch(e=>console.log(e)); + + // Show output in browser function showOutput(res) { document.getElementById('res').innerHTML = `