[ { "path": "README.md", "content": "# Axios Crash Course\r\n\r\n> These are the files for the YouTube Axios crash course.\r\n\r\n\"start.js\" is just the event listeners and empty functions. \"main.js\" is the completed code\r\n" }, { "path": "index.html", "content": "\n\n \n \n \n \n \n Axios Crash Course\n \n \n
\n
\n

Axios Crash Course

\n \n \n \n \n \n \n \n \n \n
\n
\n
\n
\n\n \n \n \n\n" }, { "path": "main.js", "content": "// AXIOS GLOBALS\naxios.defaults.headers.common['X-Auth-Token'] =\n 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';\n\n// GET REQUEST\nfunction getTodos() {\n // axios({\n // method: 'get',\n // url: 'https://jsonplaceholder.typicode.com/todos',\n // params: {\n // _limit: 5\n // }\n // })\n // .then(res => showOutput(res))\n // .catch(err => console.error(err));\n\n axios\n .get('https://jsonplaceholder.typicode.com/todos?_limit=5', {\n timeout: 5000\n })\n .then(res => showOutput(res))\n .catch(err => console.error(err));\n}\n\n// POST REQUEST\nfunction addTodo() {\n axios\n .post('https://jsonplaceholder.typicode.com/todos', {\n title: 'New Todo',\n completed: false\n })\n .then(res => showOutput(res))\n .catch(err => console.error(err));\n}\n\n// PUT/PATCH REQUEST\nfunction updateTodo() {\n axios\n .patch('https://jsonplaceholder.typicode.com/todos/1', {\n title: 'Updated Todo',\n completed: true\n })\n .then(res => showOutput(res))\n .catch(err => console.error(err));\n}\n\n// DELETE REQUEST\nfunction removeTodo() {\n axios\n .delete('https://jsonplaceholder.typicode.com/todos/1')\n .then(res => showOutput(res))\n .catch(err => console.error(err));\n}\n\n// SIMULTANEOUS DATA\nfunction getData() {\n axios\n .all([\n axios.get('https://jsonplaceholder.typicode.com/todos?_limit=5'),\n axios.get('https://jsonplaceholder.typicode.com/posts?_limit=5')\n ])\n .then(axios.spread((todos, posts) => showOutput(posts)))\n .catch(err => console.error(err));\n}\n\n// CUSTOM HEADERS\nfunction customHeaders() {\n const config = {\n headers: {\n 'Content-Type': 'application/json',\n Authorization: 'sometoken'\n }\n };\n\n axios\n .post(\n 'https://jsonplaceholder.typicode.com/todos',\n {\n title: 'New Todo',\n completed: false\n },\n config\n )\n .then(res => showOutput(res))\n .catch(err => console.error(err));\n}\n\n// TRANSFORMING REQUESTS & RESPONSES\nfunction transformResponse() {\n const options = {\n method: 'post',\n url: 'https://jsonplaceholder.typicode.com/todos',\n data: {\n title: 'Hello World'\n },\n transformResponse: axios.defaults.transformResponse.concat(data => {\n data.title = data.title.toUpperCase();\n return data;\n })\n };\n\n axios(options).then(res => showOutput(res));\n}\n\n// ERROR HANDLING\nfunction errorHandling() {\n axios\n .get('https://jsonplaceholder.typicode.com/todoss', {\n // validateStatus: function(status) {\n // return status < 500; // Reject only if status is greater or equal to 500\n // }\n })\n .then(res => showOutput(res))\n .catch(err => {\n if (err.response) {\n // Server responded with a status other than 200 range\n console.log(err.response.data);\n console.log(err.response.status);\n console.log(err.response.headers);\n\n if (err.response.status === 404) {\n alert('Error: Page Not Found');\n }\n } else if (err.request) {\n // Request was made but no response\n console.error(err.request);\n } else {\n console.error(err.message);\n }\n });\n}\n\n// CANCEL TOKEN\nfunction cancelToken() {\n const source = axios.CancelToken.source();\n\n axios\n .get('https://jsonplaceholder.typicode.com/todos', {\n cancelToken: source.token\n })\n .then(res => showOutput(res))\n .catch(thrown => {\n if (axios.isCancel(thrown)) {\n console.log('Request canceled', thrown.message);\n }\n });\n\n if (true) {\n source.cancel('Request canceled!');\n }\n}\n\n// INTERCEPTING REQUESTS & RESPONSES\naxios.interceptors.request.use(\n config => {\n console.log(\n `${config.method.toUpperCase()} request sent to ${\n config.url\n } at ${new Date().getTime()}`\n );\n\n return config;\n },\n error => {\n return Promise.reject(error);\n }\n);\n\n// AXIOS INSTANCE\nconst axiosInstance = axios.create({\n // Other custom settings\n baseURL: 'https://jsonplaceholder.typicode.com'\n});\n// axiosInstance.get('/comments').then(res => showOutput(res));\n\n// Show output in browser\nfunction showOutput(res) {\n document.getElementById('res').innerHTML = `\n
\n
Status: ${res.status}
\n
\n\n
\n
\n Headers\n
\n
\n 
${JSON.stringify(res.headers, null, 2)}
\n
\n
\n\n
\n
\n Data\n
\n
\n 
${JSON.stringify(res.data, null, 2)}
\n
\n
\n\n
\n
\n Config\n
\n
\n 
${JSON.stringify(res.config, null, 2)}
\n
\n
\n`;\n}\n\n// Event listeners\ndocument.getElementById('get').addEventListener('click', getTodos);\ndocument.getElementById('post').addEventListener('click', addTodo);\ndocument.getElementById('update').addEventListener('click', updateTodo);\ndocument.getElementById('delete').addEventListener('click', removeTodo);\ndocument.getElementById('sim').addEventListener('click', getData);\ndocument.getElementById('headers').addEventListener('click', customHeaders);\ndocument\n .getElementById('transform')\n .addEventListener('click', transformResponse);\ndocument.getElementById('error').addEventListener('click', errorHandling);\ndocument.getElementById('cancel').addEventListener('click', cancelToken);\n" }, { "path": "start.js", "content": "// GET REQUEST\nfunction getTodos() {\n console.log('GET Request');\n}\n\n// POST REQUEST\nfunction addTodo() {\n console.log('POST Request');\n}\n\n// PUT/PATCH REQUEST\nfunction updateTodo() {\n console.log('PUT/PATCH Request');\n}\n\n// DELETE REQUEST\nfunction removeTodo() {\n console.log('DELETE Request');\n}\n\n// SIMULTANEOUS DATA\nfunction getData() {\n console.log('Simultaneous Request');\n}\n\n// CUSTOM HEADERS\nfunction customHeaders() {\n console.log('Custom Headers');\n}\n\n// TRANSFORMING REQUESTS & RESPONSES\nfunction transformResponse() {\n console.log('Transform Response');\n}\n\n// ERROR HANDLING\nfunction errorHandling() {\n console.log('Error Handling');\n}\n\n// CANCEL TOKEN\nfunction cancelToken() {\n console.log('Cancel Token');\n}\n\n// INTERCEPTING REQUESTS & RESPONSES\n\n// AXIOS INSTANCES\n\n// Show output in browser\nfunction showOutput(res) {\n document.getElementById('res').innerHTML = `\n
\n
Status: ${res.status}
\n
\n\n
\n
\n Headers\n
\n
\n 
${JSON.stringify(res.headers, null, 2)}
\n
\n
\n\n
\n
\n Data\n
\n
\n 
${JSON.stringify(res.data, null, 2)}
\n
\n
\n\n
\n
\n Config\n
\n
\n 
${JSON.stringify(res.config, null, 2)}
\n
\n
\n`;\n}\n\n// Event listeners\ndocument.getElementById('get').addEventListener('click', getTodos);\ndocument.getElementById('post').addEventListener('click', addTodo);\ndocument.getElementById('update').addEventListener('click', updateTodo);\ndocument.getElementById('delete').addEventListener('click', removeTodo);\ndocument.getElementById('sim').addEventListener('click', getData);\ndocument.getElementById('headers').addEventListener('click', customHeaders);\ndocument\n .getElementById('transform')\n .addEventListener('click', transformResponse);\ndocument.getElementById('error').addEventListener('click', errorHandling);\ndocument.getElementById('cancel').addEventListener('click', cancelToken);\n" } ]