mirrors/axios
2
0
Fork 0
mirror of https://github.com/tenrok/axios.git synced 2026-06-20 20:00:40 +03:00
Code Activity

Adding examples

Browse Source
This commit is contained in:
mzabriskie
2015-02-03 01:24:38 -07:00
parent e880940099
commit 7efc095582
7 changed files with 175 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/index.html
-82
View File
@@ -1,82 +0,0 @@
<!doctype html>
<html>
<head>
<title>axios</title>
<style type="text/css">
body {
color: #222;
font-family: "Helvetica Neue", sans-serif;
font-weight: 200;
margin: 0 50px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a, a:hover, a:focus, a:active {
color: #3378b8;
}
.error {
color: #d9534f;
}
strong {
font-weight: 400;
}
h1 {
color: #666;
font-weight: 300;
}
ul {
padding: 0;
list-style-type: none;
}
li {
margin-bottom: 25px;
}
li img {
border-radius: 3px;
float: left;
margin-right: 25px;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<h1>People</h1>
<ul id="people"></ul>
<script src="../dist/axios.min.js"></script>
<script>
axios.get('people.json')
.success(function (data) {
var people = [];
data.forEach(function (person) {
people.push(
'<li>' +
'<img src="https://avatars.githubusercontent.com/u/' + person.avatar + '?s=50"/>' +
'<strong>' + person.name + '</strong>' +
'<div>Github: <a href="https://github.com/' + person.github + '" target="_blank">' + person.github + '</a></div>' +
'<div>Twitter: <a href="https://twitter.com/' + person.twitter + '" target="_blank">' + person.twitter + '</a></div>' +
'</li>'
);
});
document.getElementById('people').innerHTML = people.join('');
})
.error(function(data) {
document.getElementById('people').innerHTML = '<li class="error">' + data + '</li>';
});
</script>
</body>
</html>
examples/README.md
+9
View File
@@ -0,0 +1,9 @@
# axios examples
To run the examples:
1. Clone this repo
2. Run `npm install`
3. Run `grunt build`
4. Run `http-server -p 3000`
5. Open http://localhost:3000/examples
examples/all/index.html
+44
View File
@@ -0,0 +1,44 @@
<!doctype html>
<html>
<head>
<title>axios - all example</title>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
</head>
<body class="container">
<h1>axios.all</h1>
<div>
<h3>User</h3>
<div class="row">
<img id="useravatar" src="" class="col-md-1"/>
<div class="col-md-3">
<strong id="username"></strong>
</div>
</div>
<hr/>
<h3>Orgs</h3>
<ul id="orgs" class="list-unstyled"></ul>
</div>
<script src="/dist/axios.min.js"></script>
<script>
axios.all([
axios.get('https://api.github.com/users/mzabriskie'),
axios.get('https://api.github.com/users/mzabriskie/orgs')
]).then(axios.spread(function (user, orgs) {
document.getElementById('useravatar').src = user.data.avatar_url;
document.getElementById('username').innerHTML = user.data.name;
document.getElementById('orgs').innerHTML = orgs.data.map(function (org) {
return (
'<li class="row">' +
'<img src="' + org.avatar_url + '" class="col-md-1"/>' +
'<div class="col-md-3">' +
'<strong>' + org.login + '</strong>' +
'</div>' +
'</li>'
);
}).join('');
}));
</script>
</body>
</html>
examples/get/index.html
+33
View File
@@ -0,0 +1,33 @@
<!doctype html>
<html>
<head>
<title>axios - get example</title>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
</head>
<body class="container">
<h1>axios.get</h1>
<ul id="people" class="list-unstyled"></ul>
<script src="/dist/axios.min.js"></script>
<script>
axios.get('people.json')
.then(function (response) {
document.getElementById('people').innerHTML = response.data.map(function (person) {
return (
'<li class="row">' +
'<img src="https://avatars.githubusercontent.com/u/' + person.avatar + '?s=50" class="col-md-1"/>' +
'<div class="col-md-3">' +
'<strong>' + person.name + '</strong>' +
'<div>Github: <a href="https://github.com/' + person.github + '" target="_blank">' + person.github + '</a></div>' +
'<div>Twitter: <a href="https://twitter.com/' + person.twitter + '" target="_blank">' + person.twitter + '</a></div>' +
'</div>' +
'</li><br/>'
);
}).join('');
})
.catch(function(data) {
document.getElementById('people').innerHTML = '<li class="text-danger">' + data + '</li>';
});
</script>
</body>
</html>
example/people.json → examples/get/people.json
View File
examples/post/index.html
+45
View File
@@ -0,0 +1,45 @@
<!doctype html>
<html>
<head>
<title>axios - post example</title>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
</head>
<body class="container">
<h1>axios.post</h1>
<form role="form" class="form" onsubmit="return false;">
<div class="form-group">
<label for="url">URL</label>
<input id="url" type="text" class="form-control"/>
</div>
<div class="form-group">
<label for="data">Body</label>
<textarea id="data" class="form-control" rows="5"></textarea>
</div>
<button id="post" type="button" class="btn btn-primary">POST</button>
</form>
<div id="output" class="container"></div>
<script src="/dist/axios.min.js"></script>
<script>
(function () {
var output = document.getElementById('output');
document.getElementById('post').onclick = function () {
var url = document.getElementById('url').value;
var data = document.getElementById('data').value;
axios.post(url, JSON.parse(data))
.then(function (res) {
output.className = 'container';
output.innerHTML = res.data;
})
.catch(function (res) {
output.className = 'container text-danger';
output.innerHTML = res.data;
});
};
})();
</script>
</body>
</html>
examples/transform-response/index.html
+44
View File
@@ -0,0 +1,44 @@
<!doctype html>
<html>
<head>
<title>axios - transform response example</title>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
</head>
<body class="container">
<h1>transformResponse</h1>
<div class="row">
<img id="useravatar" src="" class="col-md-1"/>
<div class="col-md-3">
<strong id="username"></strong><br/>
Created: <span id="created"></span><br/>
Updated: <span id="updated"></span>
</div>
</div>
<script src="/dist/axios.min.js"></script>
<script>
var ISO_8601 = /(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2}:\d{2})Z/;
function formatDate(d) {
return (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
}
axios.get('https://api.github.com/users/mzabriskie', {
transformResponse: axios.defaults.transformResponse.concat(function (data, headers) {
Object.keys(data).forEach(function (k) {
if (ISO_8601.test(data[k])) {
data[k] = new Date(Date.parse(data[k]));
}
});
return data;
})
})
.then(function (res) {
document.getElementById('useravatar').src = res.data.avatar_url;
document.getElementById('username').innerHTML = res.data.name;
document.getElementById('created').innerHTML = formatDate(res.data.created_at);
document.getElementById('updated').innerHTML = formatDate(res.data.updated_at);
});
</script>
</body>
</html>