ES6 Promise 执行流程

promise

前两天遇到一个问题，让多个接口全部都完成，然后进行某项操作，于是就在网上看了一个视频，看了下基础用法，个人觉得讲的不错，就记录下来了

promise分两种阶段, 三种状态

一、 unsettled（未决阶段）

1.unsettled阶段只有一个状态padding,  padding是挂起状态, 表示等待

二、 settled（已决阶段）有两种状态

1.resolved  (成功状态)
  resolve 是从未决推向已决的resolved状态过程叫做resolve
  resolved 成功后的处理称之为thenable

2.rejected (失败状态)
  reject 从未决推向已决的rejected状态过程叫做reject

  rejected 错误后的处理称之为catchable

看下图很容易理解

promise.jpg

只要熟悉了流程，代码上面就简单多了

单独使用


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Promise</title>
    <link rel="stylesheet" href="">
</head>

<body>

    <script>
        var pos = new Promise((resolve, reject) => { // 创建promise构造函数

            var oReq = new XMLHttpRequest();

            oReq.onreadystatechange = function () { // 在发起请求的时候是未决阶段，padding状态
                if (this.readyState === 4) {
                    if (this.status === 200) {
                        resolve(this.responseText); // 得到结果后 推向已决阶段，如果是成功推向 resolve状态
                    } else {
                        reject(this); //如果是失败，推向已决状态 reject
                    }
                }
            };

            oReq.open("GET", "http://47.240.11.236:8080/json.json", true);
            oReq.send();
        });


        pos.then(res => { // resolved 成功后的处理称之为 thenable
            console.log(res);
        });
        pos.catch(err => { // rejected 成功后的处理称之为 catchable
            console.log(err) // 错误处理
        });


        // then 和 catch 还有别的写法，以下代码等同于上面
        // pos.then(res => {
        //     console.log(res);
        // }, err => {
        //     console.log(res);
        // });
    </script>

</body>

</html>

Promise.all 使用

等待两个接口同时完成后执行

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Promise.all</title>
    <link rel="stylesheet" href="">
</head>

<body>

    <script>
        // 创建pos1
        var pos1 = new Promise((resolve, reject) => { // 创建promise构造函数

            var oReq = new XMLHttpRequest();

            oReq.onreadystatechange = function () { // 在发起请求的时候是未决阶段，padding状态
                if (this.readyState === 4) {
                    if (this.status === 200) {
                        resolve(this.responseText); // 得到结果后 推向已决阶段，如果是成功推向 resolve状态
                    } else {
                        reject(this); //如果是失败，推向已决状态 reject
                    }
                }
            };

            oReq.open("GET", "http://47.240.11.236:8080/json.json", true);
            oReq.send();
        });

        // 创建pos2
        var pos2 = new Promise((resolve, reject) => { // 创建promise构造函数

            var oReq = new XMLHttpRequest();

            oReq.onreadystatechange = function () { // 在发起请求的时候是未决阶段，padding状态
                if (this.readyState === 4) {
                    if (this.status === 200) {
                        resolve(this.responseText); // 得到结果后 推向已决阶段，如果是成功推向 resolve状态
                    } else {
                        reject(this); //如果是失败，推向已决状态 reject
                    }
                }
            };

            oReq.open("GET", "http://47.240.11.236:8080/json.json", true);
            oReq.send();
        });

        // Promise.all
        Promise.all([pos1, pos2]).then(res => { // 等待 pos1 和 pos2 同时成功之后执行
            console.log(res[0]);
            console.log(res[1]);
        })
    </script>

</body>

</html>

最后编辑于：2020.04.09 09:50:12