mirror of
https://github.com/tenrok/axios.git
synced 2026-06-20 20:00: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:
Aayush Yadav
+127
-114
@@ -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;
|
||||||
@@ -13,7 +13,7 @@
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
}
|
}
|
||||||
.box{
|
.box{
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
grid-gap: 25px;
|
grid-gap: 25px;
|
||||||
}
|
}
|
||||||
@@ -25,18 +25,16 @@
|
|||||||
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> | Sandbox</h1>
|
<h1> | 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;">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
@@ -72,136 +70,151 @@
|
|||||||
|
|
||||||
<div class="response">
|
<div class="response">
|
||||||
<div class="well">
|
<div class="well">
|
||||||
<h3>Request</h3>
|
<h3>Request</h3>
|
||||||
<pre id="request">No Data</pre>
|
<pre id="request">No Data</pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="well">
|
<div class="well">
|
||||||
<h3>Response</h3>
|
<h3>Response</h3>
|
||||||
<pre id="response">No Data</pre>
|
<pre id="response">No Data</pre>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="well">
|
<div class="well">
|
||||||
<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
|
var url = document.getElementById('url');
|
||||||
if (typeof Array.prototype.indexOf === 'undefined') {
|
var method = document.getElementById('method');
|
||||||
Array.prototype.indexOf = function (item) {
|
var params = document.getElementById('params');
|
||||||
for (var i=0, l=this.length; i<l; i++) {
|
var data = document.getElementById('data');
|
||||||
if (this[i] === item) {
|
var headers = document.getElementById('headers');
|
||||||
return i;
|
var submit = document.getElementById('submit');
|
||||||
}
|
var request = document.getElementById('request');
|
||||||
}
|
var response = document.getElementById('response');
|
||||||
return -1;
|
var error = document.getElementById('error');
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var url = document.getElementById('url');
|
function acceptsData(method) {
|
||||||
var method = document.getElementById('method');
|
return ['PATCH', 'POST', 'PUT'].indexOf(method) > -1;
|
||||||
var params = document.getElementById('params');
|
}
|
||||||
var data = document.getElementById('data');
|
|
||||||
var headers = document.getElementById('headers');
|
|
||||||
var submit = document.getElementById('submit');
|
|
||||||
var request = document.getElementById('request');
|
|
||||||
var response = document.getElementById('response');
|
|
||||||
var error = document.getElementById('error');
|
|
||||||
|
|
||||||
function acceptsData(method) {
|
function getUrl() {
|
||||||
return ['PATCH', 'POST', 'PUT'].indexOf(method) > -1;
|
return url.value.length === 0 ? '/api' : url.value;
|
||||||
}
|
}
|
||||||
|
|
||||||
function getUrl() {
|
function getParams() {
|
||||||
return url.value.length === 0 ? '/api' : url.value;
|
try {
|
||||||
}
|
|
||||||
|
|
||||||
function getParams() {
|
|
||||||
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() {
|
||||||
|
url.value = localStorage.getItem('url') || '/api';
|
||||||
|
method.value = localStorage.getItem('method') || 'GET';
|
||||||
|
params.value = localStorage.getItem('params') || '';
|
||||||
|
data.value = localStorage.getItem('data') || '';
|
||||||
|
headers.value = localStorage.getItem('headers') || '';
|
||||||
|
}
|
||||||
|
|
||||||
|
function syncParamsAndData() {
|
||||||
|
switch (method.value) {
|
||||||
|
case 'PATCH':
|
||||||
|
case 'POST':
|
||||||
|
case 'PUT':
|
||||||
|
params.parentNode.style.display = 'none';
|
||||||
|
data.parentNode.style.display = '';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
params.parentNode.style.display = '';
|
||||||
|
data.parentNode.style.display = 'none';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
submit.onclick = function (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
if (url.value === '') {
|
||||||
|
error.innerHTML = 'Please enter a valid URL';
|
||||||
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
function syncWithLocalStorage() {
|
var options = {
|
||||||
method.value = localStorage.getItem('method') || 'GET';
|
url: getUrl(),
|
||||||
params.value = localStorage.getItem('params') || '';
|
params: !acceptsData(method.value) ? getParams() : undefined,
|
||||||
data.value = localStorage.getItem('data') || '';
|
data: acceptsData(method.value) ? getData() : undefined,
|
||||||
headers.value = localStorage.getItem('headers') || '';
|
method: method.value,
|
||||||
}
|
headers: getHeaders()
|
||||||
|
|
||||||
function syncParamsAndData() {
|
|
||||||
switch (method.value) {
|
|
||||||
case 'PATCH':
|
|
||||||
case 'POST':
|
|
||||||
case 'PUT':
|
|
||||||
params.parentNode.style.display = 'none';
|
|
||||||
data.parentNode.style.display = '';
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
params.parentNode.style.display = '';
|
|
||||||
data.parentNode.style.display = 'none';
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
submit.onclick = function () {
|
|
||||||
var options = {
|
|
||||||
url: getUrl(),
|
|
||||||
params: !acceptsData(method.value) ? getParams() : undefined,
|
|
||||||
data: acceptsData(method.value) ? getData() : undefined,
|
|
||||||
method: method.value,
|
|
||||||
headers: getHeaders()
|
|
||||||
};
|
|
||||||
|
|
||||||
request.innerHTML = JSON.stringify(options, null, 2);
|
|
||||||
|
|
||||||
axios(options)
|
|
||||||
.then(function (res) {
|
|
||||||
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);
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
url.onchange = function () {
|
request.innerHTML = JSON.stringify(options, null, 2);
|
||||||
localStorage.setItem('url', url.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
method.onchange = function () {
|
axios(options)
|
||||||
localStorage.setItem('method', method.value);
|
.then(function (res) {
|
||||||
syncParamsAndData();
|
response.innerHTML = JSON.stringify(res.data, null, 2);
|
||||||
};
|
error.innerHTML = "None";
|
||||||
|
})
|
||||||
|
.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";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
params.onchange = function () {
|
url.onchange = function () {
|
||||||
localStorage.setItem('params', params.value);
|
localStorage.setItem('url', url.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
data.onchange = function () {
|
method.onchange = function () {
|
||||||
localStorage.setItem('data', data.value);
|
localStorage.setItem('method', method.value);
|
||||||
};
|
|
||||||
|
|
||||||
headers.onchange = function () {
|
|
||||||
localStorage.setItem('headers', headers.value);
|
|
||||||
};
|
|
||||||
|
|
||||||
syncWithLocalStorage();
|
|
||||||
syncParamsAndData();
|
syncParamsAndData();
|
||||||
})();
|
};
|
||||||
</script>
|
|
||||||
|
params.onchange = function () {
|
||||||
|
localStorage.setItem('params', params.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
data.onchange = function () {
|
||||||
|
localStorage.setItem('data', data.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
headers.onchange = function () {
|
||||||
|
localStorage.setItem('headers', headers.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
syncWithLocalStorage();
|
||||||
|
syncParamsAndData();
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user