From 62d0d859541df1b26974315dc900a85bbeee184c Mon Sep 17 00:00:00 2001 From: Sagarika Mohanty Date: Sun, 11 Jun 2023 01:49:02 +0530 Subject: [PATCH 1/3] Axios_ApisFunctions --- main.js | 157 ++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 148 insertions(+), 9 deletions(-) diff --git a/main.js b/main.js index 83d2e150..3204575a 100644 --- a/main.js +++ b/main.js @@ -1,52 +1,191 @@ +//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.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', + // completed: false + // } + // }) + // .then(res => showOutput(res)) + // .catch(err => console.error(err)) + + axios + .post('https://jsonplaceholder.typicode.com/todos', { + title: 'new Todo', + 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', + 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 => onslotchange.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.error(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', { + // validateStatus: function(status){ + // return status < 500; + // } + }) + .then(res => showOutput(res)) + .catch(err => { + if(err.response) { + //Server responsed 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.response) + { + console.error(err.resquest); + } + 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', { + cancelToken: source.token + }) + .then(res => showOutput(res)) + .catch(thrown => { + if(axios.isCancel(thrown)) { + console.log('Request canceled', thrown.message) + } + }); + + if(true) + { + source.cancel('Request cancled'); + } } // INTERCEPTING REQUESTS & RESPONSES +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({ + baseURL: 'https://jsonplaceholder.typicode.com' +}); + +//axiosInstance.get('/comments').then(res => showOutput(res)); // Show output in browser function showOutput(res) { document.getElementById('res').innerHTML = ` From bbdf95b62b2c64811f252c8c26d8edb784cf11df Mon Sep 17 00:00:00 2001 From: Sagarika Mohanty Date: Sun, 11 Jun 2023 01:55:27 +0530 Subject: [PATCH 2/3] new Changes --- main.js | 159 ++++---------------------------------------------------- 1 file changed, 10 insertions(+), 149 deletions(-) diff --git a/main.js b/main.js index 3204575a..7ea1b673 100644 --- a/main.js +++ b/main.js @@ -1,191 +1,52 @@ -//AXIOS GLOBALS -axios.defaults.headers.common['X-Auth-Token'] = -'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c' - // GET REQUEST function getTodos() { - // 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)) - + console.log('GET Request'); } // POST REQUEST function addTodo() { - // axios({ - // method: 'post', - // url: 'https://jsonplaceholder.typicode.com/todos', - // data: { - // title: 'new Todo', - // completed: false - // } - // }) - // .then(res => showOutput(res)) - // .catch(err => console.error(err)) - - axios - .post('https://jsonplaceholder.typicode.com/todos', { - title: 'new Todo', - completed: false - }) - .then(res => showOutput(res)) - .catch(err => console.error(err)) - + console.log('POST Request'); } // PUT/PATCH REQUEST function updateTodo() { - axios - .put('https://jsonplaceholder.typicode.com/todos/1', { - title: 'updated Todo', - completed: true - }) - .then(res => showOutput(res)) - .catch(err => console.error(err)) + console.log('PUT/PATCH Request'); } // DELETE REQUEST function removeTodo() { - axios - .delete('https://jsonplaceholder.typicode.com/todos/1',) - .then(res => showOutput(res)) - .catch(err => console.error(err)) + console.log('DELETE Request'); } // SIMULTANEOUS DATA function getData() { - 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 => onslotchange.log(err)); + console.log('Simultaneous Request'); } // CUSTOM HEADERS function customHeaders() { - 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.error(err)); - + console.log('Custom Headers'); } // TRANSFORMING REQUESTS & RESPONSES function transformResponse() { - 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)) + console.log('Transform Response'); } // ERROR HANDLING function errorHandling() { - axios - .get('https://jsonplaceholder.typicode.com/todoss', { - // validateStatus: function(status){ - // return status < 500; - // } - }) - .then(res => showOutput(res)) - .catch(err => { - if(err.response) { - //Server responsed 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.response) - { - console.error(err.resquest); - } - else { - console.error(err.message); - } - }); + console.log('Error Handling'); } // CANCEL TOKEN function cancelToken() { - const source = axios.CancelToken.source(); - - axios - .get('https://jsonplaceholder.typicode.com/todoss', { - cancelToken: source.token - }) - .then(res => showOutput(res)) - .catch(thrown => { - if(axios.isCancel(thrown)) { - console.log('Request canceled', thrown.message) - } - }); - - if(true) - { - source.cancel('Request cancled'); - } + console.log('Cancel Token'); } // INTERCEPTING REQUESTS & RESPONSES -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({ - baseURL: 'https://jsonplaceholder.typicode.com' -}); - -//axiosInstance.get('/comments').then(res => showOutput(res)); // Show output in browser function showOutput(res) { document.getElementById('res').innerHTML = ` @@ -233,4 +94,4 @@ document .getElementById('transform') .addEventListener('click', transformResponse); document.getElementById('error').addEventListener('click', errorHandling); -document.getElementById('cancel').addEventListener('click', cancelToken); +document.getElementById('cancel').addEventListener('click', cancelToken); \ No newline at end of file From 0911ba630be7f40f7f51ff1a56ab058761a6505b Mon Sep 17 00:00:00 2001 From: Sagarika Mohanty Date: Sun, 11 Jun 2023 01:56:47 +0530 Subject: [PATCH 3/3] CommentedFunctions --- main.js | 159 ++++++++++++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 149 insertions(+), 10 deletions(-) diff --git a/main.js b/main.js index 7ea1b673..3204575a 100644 --- a/main.js +++ b/main.js @@ -1,52 +1,191 @@ +//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.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', + // completed: false + // } + // }) + // .then(res => showOutput(res)) + // .catch(err => console.error(err)) + + axios + .post('https://jsonplaceholder.typicode.com/todos', { + title: 'new Todo', + 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', + 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 => onslotchange.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.error(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', { + // validateStatus: function(status){ + // return status < 500; + // } + }) + .then(res => showOutput(res)) + .catch(err => { + if(err.response) { + //Server responsed 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.response) + { + console.error(err.resquest); + } + 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', { + cancelToken: source.token + }) + .then(res => showOutput(res)) + .catch(thrown => { + if(axios.isCancel(thrown)) { + console.log('Request canceled', thrown.message) + } + }); + + if(true) + { + source.cancel('Request cancled'); + } } // INTERCEPTING REQUESTS & RESPONSES +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({ + baseURL: 'https://jsonplaceholder.typicode.com' +}); + +//axiosInstance.get('/comments').then(res => showOutput(res)); // Show output in browser function showOutput(res) { document.getElementById('res').innerHTML = ` @@ -94,4 +233,4 @@ document .getElementById('transform') .addEventListener('click', transformResponse); document.getElementById('error').addEventListener('click', errorHandling); -document.getElementById('cancel').addEventListener('click', cancelToken); \ No newline at end of file +document.getElementById('cancel').addEventListener('click', cancelToken);