Skip to content

Commit 7efc095

Browse files
mzabriskiemzabriskie
committed
Adding examples
1 parent e880940 commit 7efc095

File tree

7 files changed

+175
-82
lines changed

7 files changed

+175
-82
lines changed

‎example/index.html

Lines changed: 0 additions & 82 deletions
This file was deleted.

‎examples/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# axios examples
2+
3+
To run the examples:
4+
5+
1. Clone this repo
6+
2. Run `npm install`
7+
3. Run `grunt build`
8+
4. Run `http-server -p 3000`
9+
5. Open http://localhost:3000/examples

‎examples/all/index.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>axios - all example</title>
5+
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
6+
</head>
7+
<body class="container">
8+
<h1>axios.all</h1>
9+
10+
<div>
11+
<h3>User</h3>
12+
<div class="row">
13+
<img id="useravatar" src="" class="col-md-1"/>
14+
<div class="col-md-3">
15+
<strong id="username"></strong>
16+
</div>
17+
</div>
18+
<hr/>
19+
<h3>Orgs</h3>
20+
<ul id="orgs" class="list-unstyled"></ul>
21+
</div>
22+
23+
<script src="/dist/axios.min.js"></script>
24+
<script>
25+
axios.all([
26+
axios.get('https://api.github.com/users/mzabriskie'),
27+
axios.get('https://api.github.com/users/mzabriskie/orgs')
28+
]).then(axios.spread(function (user, orgs) {
29+
document.getElementById('useravatar').src = user.data.avatar_url;
30+
document.getElementById('username').innerHTML = user.data.name;
31+
document.getElementById('orgs').innerHTML = orgs.data.map(function (org) {
32+
return (
33+
'<li class="row">' +
34+
'<img src="' + org.avatar_url + '" class="col-md-1"/>' +
35+
'<div class="col-md-3">' +
36+
'<strong>' + org.login + '</strong>' +
37+
'</div>' +
38+
'</li>'
39+
);
40+
}).join('');
41+
}));
42+
</script>
43+
</body>
44+
</html>

‎examples/get/index.html

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>axios - get example</title>
5+
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
6+
</head>
7+
<body class="container">
8+
<h1>axios.get</h1>
9+
<ul id="people" class="list-unstyled"></ul>
10+
11+
<script src="/dist/axios.min.js"></script>
12+
<script>
13+
axios.get('people.json')
14+
.then(function (response) {
15+
document.getElementById('people').innerHTML = response.data.map(function (person) {
16+
return (
17+
'<li class="row">' +
18+
'<img src="https://avatars.githubusercontent.com/u/' + person.avatar + '?s=50" class="col-md-1"/>' +
19+
'<div class="col-md-3">' +
20+
'<strong>' + person.name + '</strong>' +
21+
'<div>Github: <a href="https://github.com/' + person.github + '" target="_blank">' + person.github + '</a></div>' +
22+
'<div>Twitter: <a href="https://twitter.com/' + person.twitter + '" target="_blank">' + person.twitter + '</a></div>' +
23+
'</div>' +
24+
'</li><br/>'
25+
);
26+
}).join('');
27+
})
28+
.catch(function(data) {
29+
document.getElementById('people').innerHTML = '<li class="text-danger">' + data + '</li>';
30+
});
31+
</script>
32+
</body>
33+
</html>

‎example/people.json renamed to ‎examples/get/people.json

File renamed without changes.

‎examples/post/index.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>axios - post example</title>
5+
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
6+
</head>
7+
<body class="container">
8+
<h1>axios.post</h1>
9+
10+
<form role="form" class="form" onsubmit="return false;">
11+
<div class="form-group">
12+
<label for="url">URL</label>
13+
<input id="url" type="text" class="form-control"/>
14+
</div>
15+
<div class="form-group">
16+
<label for="data">Body</label>
17+
<textarea id="data" class="form-control" rows="5"></textarea>
18+
</div>
19+
<button id="post" type="button" class="btn btn-primary">POST</button>
20+
</form>
21+
22+
<div id="output" class="container"></div>
23+
24+
<script src="/dist/axios.min.js"></script>
25+
<script>
26+
(function () {
27+
var output = document.getElementById('output');
28+
document.getElementById('post').onclick = function () {
29+
var url = document.getElementById('url').value;
30+
var data = document.getElementById('data').value;
31+
32+
axios.post(url, JSON.parse(data))
33+
.then(function (res) {
34+
output.className = 'container';
35+
output.innerHTML = res.data;
36+
})
37+
.catch(function (res) {
38+
output.className = 'container text-danger';
39+
output.innerHTML = res.data;
40+
});
41+
};
42+
})();
43+
</script>
44+
</body>
45+
</html>

‎examples/transform-response/index.html

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>axios - transform response example</title>
5+
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
6+
</head>
7+
<body class="container">
8+
<h1>transformResponse</h1>
9+
10+
<div class="row">
11+
<img id="useravatar" src="" class="col-md-1"/>
12+
<div class="col-md-3">
13+
<strong id="username"></strong><br/>
14+
Created: <span id="created"></span><br/>
15+
Updated: <span id="updated"></span>
16+
</div>
17+
</div>
18+
19+
<script src="/dist/axios.min.js"></script>
20+
<script>
21+
var ISO_8601 = /(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2}:\d{2})Z/;
22+
function formatDate(d) {
23+
return (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
24+
}
25+
26+
axios.get('https://api.github.com/users/mzabriskie', {
27+
transformResponse: axios.defaults.transformResponse.concat(function (data, headers) {
28+
Object.keys(data).forEach(function (k) {
29+
if (ISO_8601.test(data[k])) {
30+
data[k] = new Date(Date.parse(data[k]));
31+
}
32+
});
33+
return data;
34+
})
35+
})
36+
.then(function (res) {
37+
document.getElementById('useravatar').src = res.data.avatar_url;
38+
document.getElementById('username').innerHTML = res.data.name;
39+
document.getElementById('created').innerHTML = formatDate(res.data.created_at);
40+
document.getElementById('updated').innerHTML = formatDate(res.data.updated_at);
41+
});
42+
</script>
43+
</body>
44+
</html>

0 commit comments

Comments
 (0)