sandbox/client.html

<!doctype html>
<html>
<head>
  <title>axios</title>
  <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
  <style type="text/css">
    pre {
      max-height: 200px;
      min-height: 39px;
      overflow: auto;
    }
  </style>
</head>
<body class="container">
  <h1>axios</h1>

  <div class="well">
    <h3>Input</h3>
    <form role="form" onsubmit="return false;">
      <div class="form-group">
        <label for="url">URL</label>
        <input id="url" type="url" class="form-control" placeholder="/api"/>
      </div>
      <div class="form-group">
        <label for="method">Method</label>
        <select id="method" class="form-control">
          <option value="GET">GET</option>
          <option value="POST">POST</option>
          <option value="PUT">PUT</option>
          <option value="DELETE">DELETE</option>
          <option value="HEAD">HEAD</option>
          <option value="PATCH">PATCH</option>
        </select>
      </div>
      <div class="form-group">
        <label for="params">Params</label>
        <textarea id="params" class="form-control" placeholder='{"foo": "bar", "baz": 123.45}'></textarea>
      </div>
      <div class="form-group" style="display: none;">
        <label for="data">Data</label>
        <textarea id="data" class="form-control" placeholder='{"foo": "bar", "baz": 123.45}'></textarea>
      </div>
      <div class="form-group">
        <label for="headers">Headers</label>
        <textarea id="headers" class="form-control" placeholder='{"X-Requested-With": "XMLHttpRequest"}'></textarea>
      </div>
      <button id="submit" type="submit" class="btn btn-primary">Send Request</button>
    </form>
  </div>

  <div class="well">
    <h3>Request</h3>
    <pre id="request">No Data</pre>
  </div>

  <div class="well">
    <h3>Response</h3>
    <pre id="response">No Data</pre>
  </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');

      function acceptsData(method) {
        return ['PATCH', 'POST', 'PUT'].indexOf(method) > -1;
      }

      function getUrl() {
        return url.value.length === 0 ? '/api' : url.value;
      }

      function getParams() {
        return params.value.length === 0 ? null : JSON.parse(params.value);
      }

      function getData() {
        return data.value.length === 0 ? null : JSON.parse(data.value);
      }

      function getHeaders() {
        return headers.value.length === 0 ? null : JSON.parse(headers.value);
      }

      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;
        }
      }

      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);
          })
          .catch(function (res) {
            response.innerHTML = JSON.stringify(res.data, null, 2);
          });
      };

      url.onchange = function () {
        localStorage.setItem('url', url.value);
      };

      method.onchange = function () {
        localStorage.setItem('method', method.value);
        syncParamsAndData();
      };

      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>
</html>