mirror of
https://github.com/tenrok/axios.git
synced 2026-06-05 16:42:32 +03:00
Adding sandbox
This commit is contained in:
Matt Zabriskie
@@ -0,0 +1,164 @@
|
||||
<!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="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 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 '/api';
|
||||
}
|
||||
|
||||
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)
|
||||
.success(function (res) {
|
||||
response.innerHTML = JSON.stringify(res.data, null, 2);
|
||||
})
|
||||
.error(function (res) {
|
||||
response.innerHTML = JSON.stringify(res.data, null, 2);
|
||||
});
|
||||
};
|
||||
|
||||
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>
|
||||
@@ -0,0 +1,63 @@
|
||||
var fs = require('fs');
|
||||
var url = require('url');
|
||||
var path = require('path');
|
||||
var http = require('http');
|
||||
var server;
|
||||
|
||||
server = http.createServer(function (req, res) {
|
||||
req.setEncoding('utf8');
|
||||
|
||||
var parsed = url.parse(req.url, true);
|
||||
var pathname = parsed.pathname;
|
||||
|
||||
console.log('[' + new Date() + ']', req.method, pathname);
|
||||
|
||||
if (pathname === '/') {
|
||||
pathname = '/index.html';
|
||||
}
|
||||
|
||||
if (pathname === '/index.html') {
|
||||
fs.createReadStream(path.join(__dirname, pathname)).pipe(res);
|
||||
} else if (pathname === '/axios.js') {
|
||||
res.writeHead(200, {
|
||||
'Content-Type': 'text/javascript'
|
||||
});
|
||||
fs.createReadStream(path.join(__dirname, '../dist/axios.js')).pipe(res);
|
||||
} else if (pathname === '/api') {
|
||||
var status;
|
||||
var result;
|
||||
var data = '';
|
||||
|
||||
req.on('data', function (chunk) {
|
||||
data += chunk;
|
||||
});
|
||||
|
||||
req.on('end', function () {
|
||||
try {
|
||||
status = 200;
|
||||
result = {
|
||||
url: req.url,
|
||||
data: data ? JSON.parse(data) : undefined,
|
||||
method: req.method,
|
||||
headers: req.headers
|
||||
};
|
||||
} catch (e) {
|
||||
console.error('Error:', e.message);
|
||||
status = 400;
|
||||
result = {
|
||||
error: e.message
|
||||
};
|
||||
}
|
||||
|
||||
res.writeHead(status, {
|
||||
'Content-Type': 'application/json'
|
||||
});
|
||||
res.end(JSON.stringify(result));
|
||||
});
|
||||
} else {
|
||||
res.writeHead(404);
|
||||
res.end('<h1>404 Not Found</h1>');
|
||||
}
|
||||
});
|
||||
|
||||
server.listen(3000);
|
||||
Reference in New Issue
Block a user