411 ES6 Promise对象 - 码农教程

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>11_Promise对象</title>
</head>

<body>
    <!--
        1. 理解:
            * Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
            * 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
            * ES6的Promise是一个构造函数, 用来生成promise实例

        2. 使用promise基本步骤(2步):
            * 创建promise对象
                // resolve、reject是两个函数
                let promise = new Promise((resolve, reject) => {
                    // 初始化promise状态为 pending
                    // 执行异步操作
                    if(异步操作成功) {
                        resolve(value); // 修改promise的状态为fullfilled
                    } else {
                        reject(errMsg); // 修改promise的状态为rejected
                    }
                })

            * 调用promise的then() // 多了层函数
                promise.then(function(
                    result => console.log(result),
                    errorMsg => alert(errorMsg)
                ))

        3. promise对象的3个状态
            * pending: 初始化状态
            * fullfilled: 成功状态
            * rejected: 失败状态

        4. 应用:
            * 使用promise实现超时处理

            * 使用promise封装处理ajax请求
                let request = new XMLHttpRequest();
                request.onreadystatechange = function () {
                }
                request.responseType = 'json';
                request.open("GET", url);
                request.send();
    -->

    <script type="text/javascript">
        //创建一个promise实例对象
        let promise = new Promise((resolve, reject) => {
            // 初始化promise的状态为pending---->初始化状态
            console.log('1111'); // 同步执行

            //启动异步任务
            setTimeout(function() {
                console.log('3333');
                resolve('哈哈'); // 修改promise的状态pending --> fullfilled（成功状态）
                // reject('呜呜呜呜'); // 修改promise的状态pending --> rejected(失败状态)
            }, 100)
        });

        promise.then(
            (data) => {
                console.log('成功了: ' + data);
            },
            (error) => {
                console.log('失败了: ' + error);
            }
        );

        console.log('2222');


        // ---------------------------


        // 通过 node www启动服务器，浏览器输入 http://localhost:3000/news 访问
        //定义一个请求news的方法
        function getNews(url) {
            //创建一个promise对象
            let promise = new Promise((resolve, reject) => {
                //初始化promise状态为pending
                //启动异步任务
                let request = new XMLHttpRequest();
                request.onreadystatechange = function() {
                    if (request.readyState === 4) {
                        if (request.status === 200) {
                            let news = request.response;
                            resolve(news);
                        } else {
                            reject('请求失败了。。。');
                        }
                    }
                };
                request.responseType = 'json'; //设置返回的数据类型
                request.open("GET", url); //规定请求的方法，创建链接
                request.send(); //发送
            })
            return promise;
        }

        getNews('http://localhost:3000/news?id=2')
            .then((news) => {
                console.log(news);
                document.write(JSON.stringify(news));
                console.log('http://localhost:3000' + news.commentsUrl);
                return getNews('http://localhost:3000' + news.commentsUrl);
            }, (error) => {
                alert(error);
            })
            .then((comments) => {
                console.log(comments);
                document.write('<br><br><br><br><br>' + JSON.stringify(comments));
            }, (error) => {
                alert(error);
            })
    </script>

</body>

</html>
原文地址：https://www.cnblogs.com/jianjie/p/12561842.html