mirror of
https://github.com/tenrok/axios.git
synced 2026-06-23 20:40:40 +03:00
Update client.html (#6617)
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:
+33
-20
@@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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">
|
||||
pre {
|
||||
min-height: 39px;
|
||||
@@ -25,13 +25,11 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body class="container">
|
||||
<div class="header">
|
||||
<img src="https://axios-http.com/assets/logo.svg" alt="axios" width="130" height="60">
|
||||
|
||||
<h1> | Sandbox</h1>
|
||||
</div>
|
||||
|
||||
@@ -91,18 +89,6 @@
|
||||
<script src="/axios.js"></script>
|
||||
<script>
|
||||
(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 method = document.getElementById('method');
|
||||
var params = document.getElementById('params');
|
||||
@@ -122,18 +108,34 @@
|
||||
}
|
||||
|
||||
function getParams() {
|
||||
try {
|
||||
return params.value.length === 0 ? null : JSON.parse(params.value);
|
||||
} catch (e) {
|
||||
error.innerHTML = "Invalid JSON in Params";
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function getData() {
|
||||
try {
|
||||
return data.value.length === 0 ? null : JSON.parse(data.value);
|
||||
} catch (e) {
|
||||
error.innerHTML = "Invalid JSON in Data";
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function getHeaders() {
|
||||
try {
|
||||
return headers.value.length === 0 ? null : JSON.parse(headers.value);
|
||||
} catch (e) {
|
||||
error.innerHTML = "Invalid JSON in Headers";
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function syncWithLocalStorage() {
|
||||
url.value = localStorage.getItem('url') || '/api';
|
||||
method.value = localStorage.getItem('method') || 'GET';
|
||||
params.value = localStorage.getItem('params') || '';
|
||||
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 = {
|
||||
url: getUrl(),
|
||||
params: !acceptsData(method.value) ? getParams() : undefined,
|
||||
@@ -171,10 +180,14 @@
|
||||
response.innerHTML = JSON.stringify(res.data, null, 2);
|
||||
error.innerHTML = "None";
|
||||
})
|
||||
.catch(function (res) {
|
||||
error.innerHTML = JSON.stringify(res.toJSON(), null, 2)
|
||||
console.error('Axios caught an error from request', res.toJSON());
|
||||
response.innerHTML = JSON.stringify(res.data, null, 2);
|
||||
.catch(function (err) {
|
||||
if (err.response) {
|
||||
error.innerHTML = JSON.stringify(err.response.data, null, 2);
|
||||
response.innerHTML = "Error in Response";
|
||||
} else {
|
||||
error.innerHTML = err.message;
|
||||
response.innerHTML = "No Response Data";
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user