Repository: bradtraversy/axios-crash Branch: master Commit: d664ffbd6bcf Files: 4 Total size: 9.3 KB Directory structure: gitextract_klvj9h2b/ ├── README.md ├── index.html ├── main.js └── start.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: README.md ================================================ # Axios Crash Course > These are the files for the YouTube Axios crash course. "start.js" is just the event listeners and empty functions. "main.js" is the completed code ================================================ FILE: index.html ================================================ Axios Crash Course

Axios Crash Course

================================================ FILE: main.js ================================================ // 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)); } // POST REQUEST function addTodo() { 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() { axios .patch('https://jsonplaceholder.typicode.com/todos/1', { title: 'Updated Todo', completed: true }) .then(res => showOutput(res)) .catch(err => console.error(err)); } // DELETE REQUEST function removeTodo() { axios .delete('https://jsonplaceholder.typicode.com/todos/1') .then(res => showOutput(res)) .catch(err => console.error(err)); } // 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(axios.spread((todos, posts) => showOutput(posts))) .catch(err => console.error(err)); } // 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)); } // 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)); } // ERROR HANDLING function errorHandling() { axios .get('https://jsonplaceholder.typicode.com/todoss', { // 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() { const source = axios.CancelToken.source(); axios .get('https://jsonplaceholder.typicode.com/todos', { cancelToken: source.token }) .then(res => showOutput(res)) .catch(thrown => { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } }); if (true) { source.cancel('Request canceled!'); } } // 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 INSTANCE const axiosInstance = axios.create({ // Other custom settings baseURL: 'https://jsonplaceholder.typicode.com' }); // axiosInstance.get('/comments').then(res => showOutput(res)); // Show output in browser function showOutput(res) { document.getElementById('res').innerHTML = `
Status: ${res.status}
Headers 
${JSON.stringify(res.headers, null, 2)}
Data 
${JSON.stringify(res.data, null, 2)}
Config 
${JSON.stringify(res.config, null, 2)}
`; } // Event listeners document.getElementById('get').addEventListener('click', getTodos); document.getElementById('post').addEventListener('click', addTodo); document.getElementById('update').addEventListener('click', updateTodo); document.getElementById('delete').addEventListener('click', removeTodo); document.getElementById('sim').addEventListener('click', getData); document.getElementById('headers').addEventListener('click', customHeaders); document .getElementById('transform') .addEventListener('click', transformResponse); document.getElementById('error').addEventListener('click', errorHandling); document.getElementById('cancel').addEventListener('click', cancelToken); ================================================ FILE: start.js ================================================ // GET REQUEST function getTodos() { console.log('GET Request'); } // POST REQUEST function addTodo() { console.log('POST Request'); } // PUT/PATCH REQUEST function updateTodo() { console.log('PUT/PATCH Request'); } // DELETE REQUEST function removeTodo() { console.log('DELETE Request'); } // SIMULTANEOUS DATA function getData() { console.log('Simultaneous Request'); } // CUSTOM HEADERS function customHeaders() { console.log('Custom Headers'); } // TRANSFORMING REQUESTS & RESPONSES function transformResponse() { console.log('Transform Response'); } // ERROR HANDLING function errorHandling() { console.log('Error Handling'); } // CANCEL TOKEN function cancelToken() { console.log('Cancel Token'); } // INTERCEPTING REQUESTS & RESPONSES // AXIOS INSTANCES // Show output in browser function showOutput(res) { document.getElementById('res').innerHTML = `
Status: ${res.status}
Headers 
${JSON.stringify(res.headers, null, 2)}
Data 
${JSON.stringify(res.data, null, 2)}
Config 
${JSON.stringify(res.config, null, 2)}
`; } // Event listeners document.getElementById('get').addEventListener('click', getTodos); document.getElementById('post').addEventListener('click', addTodo); document.getElementById('update').addEventListener('click', updateTodo); document.getElementById('delete').addEventListener('click', removeTodo); document.getElementById('sim').addEventListener('click', getData); document.getElementById('headers').addEventListener('click', customHeaders); document .getElementById('transform') .addEventListener('click', transformResponse); document.getElementById('error').addEventListener('click', errorHandling); document.getElementById('cancel').addEventListener('click', cancelToken);