<!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: