Update client.html (axios#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 <[email protected]>
QuackatronHQ · Nov 8, 2024 · 39f00c3 · 39f00c3
1 parent 7ccd5fd
commit 39f00c3
Showing 1 changed file with 124 additions and 111 deletions.
diff --git a/sandbox/client.html b/sandbox/client.html
@@ -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/[email protected]/dist/css/bootstrap.min.css"/>
   <style type="text/css">
     pre {
       min-height: 39px;
@@ -13,7 +13,7 @@
       flex-direction: row;
     }
     .box{
-     display: grid;
+      display: grid;
       grid-template-columns: 1fr 1fr;
       grid-gap: 25px;
     }
@@ -25,18 +25,16 @@
         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> &nbsp;| Sandbox</h1>
 </div>
 
-  <div class="box">
-    <div class="well">
+<div class="box">
+  <div class="well">
     <h3>Input</h3>
     <form role="form" onsubmit="return false;">
       <div class="form-group">
@@ -72,136 +70,151 @@ <h3>Input</h3>
 
   <div class="response">
     <div class="well">
-    <h3>Request</h3>
-    <pre id="request">No Data</pre>
-  </div>
+      <h3>Request</h3>
+      <pre id="request">No Data</pre>
+    </div>
 
-  <div class="well">
-    <h3>Response</h3>
-    <pre id="response">No Data</pre>
-  </div>
+    <div class="well">
+      <h3>Response</h3>
+      <pre id="response">No Data</pre>
+    </div>
 
-  <div class="well">
-    <h3>Error</h3>
-    <pre id="error">None</pre>
+    <div class="well">
+      <h3>Error</h3>
+      <pre id="error">None</pre>
+    </div>
   </div>
 </div>
-  </div>
-
-  <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');
-      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) {
-        return ['PATCH', 'POST', 'PUT'].indexOf(method) > -1;
-      }
+<script src="/axios.js"></script>
+<script>
+  (function () {
+    var url = document.getElementById('url');
+    var method = document.getElementById('method');
+    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) {
+      return ['PATCH', 'POST', 'PUT'].indexOf(method) > -1;
+    }
 
-      function getUrl() {
-        return url.value.length === 0 ? '/api' : url.value;
-      }
+    function getUrl() {
+      return url.value.length === 0 ? '/api' : url.value;
+    }
 
-      function getParams() {
+    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() {
+    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() {
+    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') || '';
+      headers.value = localStorage.getItem('headers') || '';
+    }
 
-      function syncWithLocalStorage() {
-        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;
       }
+    }
 
-      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;
       }
 
-      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);
-          });
+      var options = {
+        url: getUrl(),
+        params: !acceptsData(method.value) ? getParams() : undefined,
+        data: acceptsData(method.value) ? getData() : undefined,
+        method: method.value,
+        headers: getHeaders()
       };
 
-      url.onchange = function () {
-        localStorage.setItem('url', url.value);
-      };
+      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 (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";
+          }
+        });
+    };
 
-      method.onchange = function () {
-        localStorage.setItem('method', method.value);
-        syncParamsAndData();
-      };
+    url.onchange = function () {
+      localStorage.setItem('url', url.value);
+    };
 
-      params.onchange = function () {
-        localStorage.setItem('params', params.value);
-      };
+    method.onchange = function () {
+      localStorage.setItem('method', method.value);
+      syncParamsAndData();
+    };
 
-      data.onchange = function () {
-        localStorage.setItem('data', data.value);
-      };
+    params.onchange = function () {
+      localStorage.setItem('params', params.value);
+    };
 
-      headers.onchange = function () {
-        localStorage.setItem('headers', headers.value);
-      };
+    data.onchange = function () {
+      localStorage.setItem('data', data.value);
+    };
 
-      syncWithLocalStorage();
-      syncParamsAndData();
-    })();
-  </script>
+    headers.onchange = function () {
+      localStorage.setItem('headers', headers.value);
+    };
+
+    syncWithLocalStorage();
+    syncParamsAndData();
+  })();
+</script>
 </body>
-</html>
+</html>