0


ES6 - Promise详解及用法

一、什么是Promise

Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配(ES8),但是它们是基于promise的),从语法上讲,Promise是一个对象或者说是构造函数,用来封装异步操作并可以获取其成功或失败的结果。

二、为什么要使用promise

最重要也是最主要的一个场景就是ajax和axios请求。通俗来说,由于网速的不同,可能你得到返回值的时间也是不同的,但是我们下一步要执行的代码依赖于上一次请求返回值,这个时候我们就需要等待,结果出来了之后才知道怎么样继续下去。

三、promise的好处

防止出现回调地狱;

提高代码的可读性;

像同步操作那样去执行异步操作

四、promise的三种状态

1.pending: 等待中,或者进行中,表示还没有得到结果
2.resolved(Fulfilled): 已经完成,表示得到了我们想要的结果,可以继续往下执行
3.rejected: 也表示得到结果,但是由于结果并非我们所愿,因此拒绝执行

    <script>
        function fn(flag) {
            //构造函数
               return new Promise(function(resolve, reject) {
                if (flag === true) {
                    resolve('promise状态为成功!')
                };
                if (flag === false) {
                    reject('promise状态失败!')
                };
            })
        }
 
        console.log(fn(true));
    </script>

五、promise的用法

1.promise的实例方法

①then() 得到异步任务的正确结果

②catch() 获取异常信息
③finally() 成功与否都会执行(尚且不是正式标准)
注意:then方法可以接受两个函数,第一个函数为promise状态为成功的回调函数,第二个函数为promise状态为失败的回调函数(可以不写,一般用catch方法捕获promise状态为失败的异常信息)

<script>
    let pro = new Promise((resolve, reject) => {
        if (Math.random() > 0.5) {
            resolve("i'm resolve");
        } else {
            reject("i'm reject");
        }
    })

    pro.then((res) => {
        console.log(res);
    }).catch((err) => {
        console.log(err);
    })
</script>

案例

目标:拿到关于 狙击手 电影的描述

过程:

1.先登录

2.请求 导演信息 找到张导的id

3.请求 电影信息 找到描述 
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    // 1.登录
    // let myLogin = () => new Promise()
    function myLogin() {
        return new Promise((resolve, reject) => {
            $.ajax({
                type: 'get',
                url: '../json/login.json',
                success(res) {
                    resolve(res);
                },
                error(err) {
                    reject(err);
                }
            })
        })
    }

    // 2.导演列表
    function myDirector() {
        return new Promise((resolve, reject) => {
            $.ajax({
                type: 'get',
                url: '../json/director.json',
                success(res) {
                    resolve(res);
                },
                error(err) {
                    reject(err);
                }
            })
        })
    }

    // 3.电影信息
    function myFilm(id) {
        return new Promise((resolve, reject) => {
            $.ajax({
                type: 'get',
                url: '../json/' + id + '.json',
                success(res) {
                    resolve(res);
                },
                error(err) {
                    reject(err);
                }
            })
        })
    }

    myLogin().then(res => {
        return myDirector();
    }).then(res => {
        return myFilm(3);
    }).then(res => {
        console.log(res);
    }).catch(err => {
        console.log(err);
    })
</script>

2.promise的对象方法(p1,p2,p3为promise的实例对象)

①Promise.all() 并发处理多个异步任务,所有任务都执行完成才能得到结果

Promise.all( [p1,p2,p3] ) .then ( (result) => {
    consoleog (result)
})

②Promise.race() 并发处理多个异步任务,只要有一个任务完成就能得到结果

Promise.race ( [p1,p2,p3] ).then ( (result)=>{
     console. log (result)
})

六、总结

1.promise其实就是一个对象或者说是构造函数
2.promise的出现(es6) 就是解决异步编程和回调地狱等问题,async和await的出现(ES8)就是基于promise的一种解决异步编程的终极解决方案(简化代码等等)
3.在前端中,ajax和axios都会用到异步编程,axios更是基于promise的,所以一定要掌握 promise以及用async和await搭配promise的使用


本文转载自: https://blog.csdn.net/Cc200171/article/details/125295823
版权归原作者 章鱼Cc_yoo 所有, 如有侵权,请联系我们删除。

“ES6 - Promise详解及用法”的评论:

还没有评论