mirrors/axios
2
0
Fork 0
mirror of https://github.com/tenrok/axios.git synced 2026-06-23 20:40:40 +03:00
Code Activity

Update client.html (#6617)

Browse Source 
url synchronization with localStorage: Added url.value = localStorage.getItem('url') || '/api'; to sync the url field with localStorage.
Error Handling in Axios .catch(): Updated .catch() block to handle Axios errors correctly with err.response and err.message.
JSON Parsing in params, data, headers: Wrapped JSON.parse() with try-catch blocks to handle invalid JSON input errors.
Default URL Validation: Added a check to ensure a valid URL is provided.
Removed IE8 Compatibility Code: Removed the outdated code for Array.prototype.indexOf support.
Form Submission Prevention: Added event.preventDefault() to prevent form reload on submission.

Co-authored-by: Jay <jasonsaayman@gmail.com>
This commit is contained in:
Aayush Yadav
2024-11-08 15:20:23 +05:30
committed by GitHub
parent 7ccd5fd424
commit 39f00c3335
1 changed files with 128 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sandbox/client.html
+38 -25
View File
@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<title>AXIOS | Sandbox</title> <title>AXIOS | Sandbox</title>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/>
<style type="text/css"> <style type="text/css">
pre { pre {
min-height: 39px; min-height: 39px;
@@ -25,17 +25,15 @@
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
</style> </style>
</head> </head>
<body class="container"> <body class="container">
<div class="header"> <div class="header">
<img src="https://axios-http.com/assets/logo.svg" alt="axios" width="130" height="60"> <img src="https://axios-http.com/assets/logo.svg" alt="axios" width="130" height="60">
<h1> &nbsp;| Sandbox</h1> <h1> &nbsp;| Sandbox</h1>
</div> </div>
<div class="box"> <div class="box">
<div class="well"> <div class="well">
<h3>Input</h3> <h3>Input</h3>
<form role="form" onsubmit="return false;"> <form role="form" onsubmit="return false;">
@@ -85,24 +83,12 @@
<h3>Error</h3> <h3>Error</h3>
<pre id="error">None</pre> <pre id="error">None</pre>
</div> </div>
</div>
</div> </div>
</div>
<script src="/axios.js"></script> <script src="/axios.js"></script>
<script> <script>
(function () { (function () {
// Just for you IE8
if (typeof Array.prototype.indexOf === 'undefined') {
Array.prototype.indexOf = function (item) {
for (var i=0, l=this.length; i<l; i++) {
if (this[i] === item) {
return i;
}
}
return -1;
}
}
var url = document.getElementById('url'); var url = document.getElementById('url');
var method = document.getElementById('method'); var method = document.getElementById('method');
var params = document.getElementById('params'); var params = document.getElementById('params');
@@ -122,18 +108,34 @@
} }
function getParams() { function getParams() {
try {
return params.value.length === 0 ? null : JSON.parse(params.value); return params.value.length === 0 ? null : JSON.parse(params.value);
} catch (e) {
error.innerHTML = "Invalid JSON in Params";
return null;
}
} }
function getData() { function getData() {
try {
return data.value.length === 0 ? null : JSON.parse(data.value); return data.value.length === 0 ? null : JSON.parse(data.value);
} catch (e) {
error.innerHTML = "Invalid JSON in Data";
return null;
}
} }
function getHeaders() { function getHeaders() {
try {
return headers.value.length === 0 ? null : JSON.parse(headers.value); return headers.value.length === 0 ? null : JSON.parse(headers.value);
} catch (e) {
error.innerHTML = "Invalid JSON in Headers";
return null;
}
} }
function syncWithLocalStorage() { function syncWithLocalStorage() {
url.value = localStorage.getItem('url') || '/api';
method.value = localStorage.getItem('method') || 'GET'; method.value = localStorage.getItem('method') || 'GET';
params.value = localStorage.getItem('params') || ''; params.value = localStorage.getItem('params') || '';
data.value = localStorage.getItem('data') || ''; data.value = localStorage.getItem('data') || '';
@@ -155,7 +157,14 @@
} }
} }
submit.onclick = function () { submit.onclick = function (event) {
event.preventDefault();
if (url.value === '') {
error.innerHTML = 'Please enter a valid URL';
return;
}
var options = { var options = {
url: getUrl(), url: getUrl(),
params: !acceptsData(method.value) ? getParams() : undefined, params: !acceptsData(method.value) ? getParams() : undefined,
@@ -171,10 +180,14 @@
response.innerHTML = JSON.stringify(res.data, null, 2); response.innerHTML = JSON.stringify(res.data, null, 2);
error.innerHTML = "None"; error.innerHTML = "None";
}) })
.catch(function (res) { .catch(function (err) {
error.innerHTML = JSON.stringify(res.toJSON(), null, 2) if (err.response) {
console.error('Axios caught an error from request', res.toJSON()); error.innerHTML = JSON.stringify(err.response.data, null, 2);
response.innerHTML = JSON.stringify(res.data, null, 2); response.innerHTML = "Error in Response";
} else {
error.innerHTML = err.message;
response.innerHTML = "No Response Data";
}
}); });
}; };
@@ -202,6 +215,6 @@
syncWithLocalStorage(); syncWithLocalStorage();
syncParamsAndData(); syncParamsAndData();
})(); })();
</script> </script>
</body> </body>
</html> </html>