building-promises.html

<!DOCTYPE html>
<html>
    <head>

        <!-- Load babel 5 - babel-core -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.js"></script>

        <script type="text/babel">
            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 = error => rejects(err);

                    request.send();
                });
            };

            spacePeople().then(
                spaceData => console.log(spaceData),
                err => console.error(
                    new Error('Cannot load new space people')
                )
            );

          
        </script>

        <title>Building Promises</title>

    </head>

    <body>

        <h1>Hit the pit</h1>

        <h2>Building Promises</h2>

        <p>We normally use Promises to load data.</p>

    </body>
</html>