forked from bradtraversy/axios-crash
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
/
start.js
97 lines (82 loc) · 2.16 KB
/
start.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
// 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 = `
<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>
`;
}
// 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);