mirror of
https://github.com/axios/axios.git
synced 2026-04-11 02:11:50 +08:00
Adding examples
This commit is contained in:
mzabriskie
parent
e880940099
commit
7efc095582
@ -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>
|
||||
9
examples/README.md
Normal file
9
examples/README.md
Normal 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
|
||||
44
examples/all/index.html
Normal file
44
examples/all/index.html
Normal 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>
|
||||
33
examples/get/index.html
Normal file
33
examples/get/index.html
Normal 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>
|
||||
45
examples/post/index.html
Normal file
45
examples/post/index.html
Normal 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>
|
||||
44
examples/transform-response/index.html
Normal file
44
examples/transform-response/index.html
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user