当前位置：网站首页>ES6高级-Promise的用法

ES6高级-Promise的用法

2022-08-04 21:30:00 【吃鱼丸的申申】

概念：相当于一个容器，保存着未来才会结束的事件（异步操作）的一个结果。

特点：
1.对象的状态不受外界影响，处理异步操作三个状态：Pending(进行) Resolved(成功) Rejected(失败)。
2.一旦状态改变就不会再变。

（1）Promise对象有两个方法：

1.then()方法是执行异步任务返回成功的结果

then()的第一个参数是resolve回调函数，第二个参数是可选的，是reject状态回调的函数，then()方法返回的是一个新的Promise实例可以采用链式编程。

2.catch()方法是执行异步任务返回失败的结果

catch(err=>console.log(err))方法相当于then(null,err=>console.log(err))，所以用then写的可以改成下面这样（下面的写法也是最常用的写法）：

来看几个Promise的案例代码

（一）

<body>
    <script>
        // resolved和rejected都是函数
        let pro = new Promise(function(resolved, rejected) {
            let res = {
                    code: 201,
                    data: {
                        name: 'sy'
                    },
                    error: '错误啦'
                }
                // 执行异步操作
            setTimeout(() => {
                if (res.code === 200) {
                    resolved(res.data);
                } else {
                    rejected(res.error);
                }
            }, 1000)
        })
        pro.then(val => console.log(val), error => console.log(error))
    </script>
</body>

输出结果：

（二）下面这个代码很重要：通过Promise来设置定时器的秒数

<body>
    <script>
        // resolved和rejected都是函数
        function timeout(ms) {
            return new Promise((resolved, rejected) => {
                setTimeout(() => {
                    resolved('hello');
                }, ms)
            })
        }
        timeout(2000).then(val => console.log(val))//hello
    </script>
</body>

then()返回的是一个新的Promise实例，看下面的代码：

<body>
    <script>
        // resolved和rejected都是函数
        // 采用Promise来规定定时器的秒数
        function timeout(ms) {
            return new Promise((resolved, rejected) => {
                setTimeout(() => {
                    resolved('hello');
                }, ms)
            })
        }
        let sy = timeout(2000).then(val => {
            console.log(val);
            return [1, 2, 3, 4];
        }).then(val => console.log(val))
        console.log(sy);
    </script>
</body>

输出结果：

（2）Promise对象的其他方法

关于Promise是同步还是异步可以看这个博客：promise是同步还是异步的？_Shi Jian Xin的博客-CSDN博客_promise是同步还是异步

1.resolve()方法

返回的是一个Promise实例，看下面的代码：

<body>
    <script>
        let p = Promise.resolve('foo');
        // 上面这句话和下面这句话等价
        // let p = new Promise(resolve => resolve('foo'));
        console.log(p);
        p.then(val => console.log(val));//foo
    </script>
</body>

输出结果：

2.reject()方法

返回的同样是一个Promise实例，看下面的代码：

<body>
    <script>
        let p = Promise.reject('foo');
        // 上面这句话和下面这句话等价
        // let p = new Promise(reject => reject('foo'));
        console.log(p);
        p.catch(val => console.log(val));
    </script>
</body>

3.all()方法

有时候会有多个Promise，比如在游戏控制的时候，Promise1是图片加载，Promise2是flash加载，Promise3是静态资源加载，要求当三个都加载完成之后再进行页面的初始化，这个时候就要用到all()方法，总结就是异步并行操作。

(4)race()方法

某个异步请求设置超时时间，并且在超时后执行相应的操作（重要）

<body>
    <script>
        function requestimg(imgsrc) {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.src = imgsrc;
                img.onload = function() {
                    // 请求成功返回一个Img对象
                    resolve(img);
                }
            })
        }

        function timeout() {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    reject('图片请求超时');
                }, 3000)
            })
        }
        // 三秒之内如果请求到了图片就返回图片对象，如果没有返回图片就返回的’图片请求超时‘
        Promise.race([requestimg('img/1.jpg'), timeout()]).then(data => {
            console.log(data);
            document.body.appendChild(data)
        }).catch(err => console.log(err))
    </script>
</body>

输出结果：