<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
<script type="text/babel">
const getPeopleInSpace = () =>
fetch('http://api.open-notify.org/astros.json')
.then(res => res.json());
const spaceNames = () =>
getPeopleInSpace()
.then(json => json.people)
.then(people => people.map(p => p.name))
.then(names => names.join(', '));
spaceNames().then(console.log);
/*const spacePeople = () => {
return new Promise((resolves, rejects) => {
const api = 'http://api.open-notify.org/astros.json';
const request = new XMLHttpRequest();
request.open('GET', api);
request.onload = () => {
if(request.status === 200) {
resolves(JSON.parse(request.response));
} else {
rejects(Error(request.statusText));
}
};
request.onerror = err => rejects(err);
request.send();
});
};
spacePeople().then(
spaceData => console.log(spaceData),
err => console.error(
new Error('Cannot load space people')
)
);*/
</script>
<title>Building Promises</title>
</head>
<body>
</body>
</html>Output:
