Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implemented all the commented functions in the code #19

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Implemented all the commented functions in the code #19

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
328 changes: 271 additions & 57 deletions start.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,97 +1,311 @@
// GET REQUEST
function getTodos() {
console.log('GET Request');
fetch('https://api.example.com/todos')
.then(response => response.json())
.then(data => {
console.log('GET Request');
console.log(data); // Assuming the response contains the todos data
})
.catch(error => {
console.error('Error:', error);
});
}

// POST REQUEST

function addTodo() {
console.log('POST Request');
const todo = {
title: 'New Todo',
description: 'Some description',
completed: false
};

fetch('https://api.example.com/todos', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(todo)
})
.then(response => response.json())
.then(data => {
console.log('POST Request');
console.log(data); // Assuming the response contains the added todo data
})
.catch(error => {
console.error('Error:', error);
});
}

// PUT/PATCH REQUEST
function updateTodo() {
console.log('PUT/PATCH Request');
const todoId = 123; // Replace with the ID of the todo you want to update

const updatedTodo = {
title: 'Updated Todo',
description: 'Updated description',
completed: true
};

fetch(`https://api.example.com/todos/${todoId}`, {
method: 'PUT', // or 'PATCH' if you want a partial update
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(updatedTodo)
})
.then(response => response.json())
.then(data => {
console.log('PUT/PATCH Request');
console.log(data); // Assuming the response contains the updated todo data
})
.catch(error => {
console.error('Error:', error);
});
}

// DELETE REQUEST
function removeTodo() {
console.log('DELETE Request');
const todoId = 123; // Replace with the ID of the todo you want to remove

fetch(`https://api.example.com/todos/${todoId}`, {
method: 'DELETE'
})
.then(response => {
if (response.ok) {
console.log('DELETE Request');
console.log(`Todo with ID ${todoId} has been successfully deleted.`);
} else {
throw new Error('Error deleting todo.');
}
})
.catch(error => {
console.error('Error:', error);
});
}

// SIMULTANEOUS DATA
function getData() {
console.log('Simultaneous Request');
const url1 = 'https://api.example.com/data1';
const url2 = 'https://api.example.com/data2';

const request1 = fetch(url1);
const request2 = fetch(url2);

Promise.all([request1, request2])
.then(responses => Promise.all(responses.map(response => response.json())))
.then(data => {
console.log('Simultaneous Request');
console.log('Data 1:', data[0]); // Data from the first URL
console.log('Data 2:', data[1]); // Data from the second URL
})
.catch(error => {
console.error('Error:', error);
});
}

// CUSTOM HEADERS
function customHeaders() {
console.log('Custom Headers');
const url = 'https://api.example.com/data';

const headers = {
'Content-Type': 'application/json',
'Authorization': 'Bearer your-token'
};

fetch(url, {
method: 'GET',
headers: headers
})
.then(response => response.json())
.then(data => {
console.log('Custom Headers');
console.log(data); // Assuming the response contains the desired data
})
.catch(error => {
console.error('Error:', error);
});
}

// TRANSFORMING REQUESTS & RESPONSES
function transformResponse() {
console.log('Transform Response');
const url = 'https://api.example.com/data';

fetch(url)
.then(response => response.json())
.then(data => {
console.log('Transform Response');
const transformedData = transformData(data); // Custom transformation function
console.log(transformedData);
})
.catch(error => {
console.error('Error:', error);
});
}

// Custom transformation function
function transformData(data) {
// Perform transformation on the data
// For example, you can map over an array and modify its items
const transformedArray = data.map(item => ({
...item,
modified: true
}));

// Return the transformed data
return transformedArray;
}

// ERROR HANDLING
function errorHandling() {
console.log('Error Handling');
const url = 'https://api.example.com/data';

fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Request failed with status ' + response.status);
}
return response.json();
})
.then(data => {
console.log('Error Handling');
console.log(data); // Assuming the response contains the desired data
})
.catch(error => {
console.error('Error:', error);
});
}

// CANCEL TOKEN
function cancelToken() {
console.log('Cancel Token');
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

const url = 'https://api.example.com/data';

axios.get(url, {
cancelToken: source.token
})
.then(response => {
console.log('Cancel Token');
console.log(response.data); // Assuming the response contains the desired data
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('Request canceled:', error.message);
} else {
console.error('Error:', error);
}
});

// Cancel the request
source.cancel('Request canceled by the user');
}

// INTERCEPTING REQUESTS & RESPONSES
// Import the Axios library
const axios = require('axios');

// Create an instance of Axios
const instance = axios.create();

// Add a request interceptor
instance.interceptors.request.use(
config => {
// Modify the request config as needed
console.log('Request Interceptor:', config);
return config;
},
error => {
// Handle request error
console.error('Request Interceptor Error:', error);
return Promise.reject(error);
}
);

// Add a response interceptor
instance.interceptors.response.use(
response => {
// Modify the response data as needed
console.log('Response Interceptor:', response.data);
return response;
},
error => {
// Handle response error
console.error('Response Interceptor Error:', error);
return Promise.reject(error);
}
);

// AXIOS INSTANCES

// Show output in browser
function showOutput(res) {
document.getElementById('res').innerHTML = `
<div class="card card-body mb-4">
<h5>Status: ${res.status}</h5>
</div>

<div class="card mt-3">
<div class="card-header">
Headers
</div>
<div class="card-body">
<pre>${JSON.stringify(res.headers, null, 2)}</pre>
</div>
</div>

<div class="card mt-3">
<div class="card-header">
Data
</div>
<div class="card-body">
<pre>${JSON.stringify(res.data, null, 2)}</pre>
</div>
</div>

<div class="card mt-3">
<div class="card-header">
Config
</div>
<div class="card-body">
<pre>${JSON.stringify(res.config, null, 2)}</pre>
</div>
</div>
`;
// Example usage
function makeRequest() {
const url = 'https://api.example.com/data';

instance.get(url)
.then(response => {
console.log('Request Successful');
console.log(response.data);
})
.catch(error => {
console.error('Request Failed:', error);
});
}

// 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);
makeRequest();


// // Import the Axios library
const axios = require('axios');

// Create an instance of Axios
const instance = axios.create({
baseURL: 'https://api.example.com',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer your-token'
}
});

// Add request interceptors
instance.interceptors.request.use(
config => {
// Modify the request config as needed
console.log('Request Interceptor:', config);
return config;
},
error => {
// Handle request error
console.error('Request Interceptor Error:', error);
return Promise.reject(error);
}
);

// Add response interceptors
instance.interceptors.response.use(
response => {
// Modify the response data as needed
console.log('Response Interceptor:', response.data);
return response;
},
error => {
// Handle response error
console.error('Response Interceptor Error:', error);
return Promise.reject(error);
}
);

// Example usage
function makeRequest() {
instance.get('/data')
.then(response => {
console.log('Request Successful');
console.log(response.data);
})
.catch(error => {
console.error('Request Failed:', error);
});
}

makeRequest();