前后端交互01之Promise的用法

最新推荐文章于 2024-01-30 15:29:38 发布

iku_ki

最新推荐文章于 2024-01-30 15:29:38 发布

阅读量161

点赞数 1

分类专栏： IT 学习文章标签： html python node.js

本文链接：https://blog.csdn.net/weixin_46435234/article/details/116380649

版权

IT 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

学习

28 篇文章 0 订阅

订阅专栏

前后端交互之Promise的用法

原生ajax对后台进行访问
Promise的基本用法
Promise处理ajax请求
Promisr对象的then参数中的函数的返回值
Promise常用的实例方法
Promise常用的对象方法

01原生ajax对后台进行访问

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-1.12.4.js"></script>
</head>

<body>
    <!-- ajax请求
        缺点是：代码多，默认情况下不能控制请求的先后顺序，因为每个请求都会耗时，不会按照代码的顺序来执行
        解决方法：回调嵌套的方式，解决请求先后顺序的问题，把下一次的ajax请求放到前一个ajax请求的success回调函数中
        只有当上一次的请求发送完毕后，才会发送下一次请求，
    -->
    <script>
        // 异步处理需要时间，可能会导致请求返回的结果顺序不一致
        $.ajax({
            url: "http://127.0.0.1:5000/img_code?phone=15612121212",
            success: function (data) {
                console.log(data);
            }
        })
        $.ajax({
            url: "http://127.0.0.1:5000/news_list?id=3",
            success: function (data) {
                console.log(data);
            }
        })
        $.ajax({
            url: "http://127.0.0.1:5000/news_detail/2",
            success: function (data) {
                console.log(data);
            }
        })
    </script>



</body>

</html>

02Promise的基本用法

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 

        概述：Promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，可以获取异步操作的消息
        目的： （1）、避免回调地狱的问题（2）、Promise对象提供了简洁的API，使得控制异步操作更加容易

    -->
    <script>
        // console.log(Promise);//function
        // Promise实现步骤：
        // 实例化Promise对象，构造函数中传递函数，该函数用于处理异步请求任务
        //函数对应两个参数：resoive与reject用于处理成功与失败两种情况，并通过 实例对象.then(function(){}) 获取处理结果

        var p = new Promise(function (resoive, reject) {
            // 这里用于实现异步任务
            setTimeout(function () {//模拟请求
                var flag = false
                if (flag) {
                    resoive("hello")//请求成功
                } else {
                    reject("world")//请求失败
                }
            }, 1000)
        }).then(function (data) {//第一个参数是处理请求成功后的逻辑代码，data是resoive传递过来的数据
            console.log(data);
        }, function (data) { //第二个参数是处理请求失败后的逻辑代码，data是reject传递过来的数据
            console.log(data);
        })
    </script>
</body>

</html>

03Promise处理ajax请求

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../jquery-1.12.4.js"></script>
</head>

<body>
    <script>
        // 封装函数
        function queryData(url) {
            var p = new Promise(function (resoive, reject) {
                // 实现ajax异步任务
                var xhr = new XMLHttpRequest()
                xhr.open("get", url)
                xhr.send()
                // 处理返回结果
                xhr.onreadystatechange = function (data) {
                    if (xhr.readyState == 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            // 请求成功
                            resoive(xhr.responseText)
                        } else {
                            // 请求失败
                            reject("请求失败")
                        }
                    }
                }
            })
            return p
        }

        // 发送一个ajax
        // queryData("http://127.0.0.1:5000/news_detail/2").then(function (data) {
        //     console.log(data);
        // }, function (data) {
        //     console.log(data);
        // })
        // ---------------
        // 发送多个ajax请求，并且保证请求顺序
        queryData("http://127.0.0.1:5000/news_detail/2").then(function (data) {
            console.log(data);
            return queryData("http://127.0.0.1:5000/img_code?phone=15612121212")
        }).then(function (data) {//此时的then是return返回的p对象
            console.log(data);
            return queryData("http://127.0.0.1:5000/news_list?id=3")
        }).then(function (data) {
            console.log(data);
        })
    </script>
</body>

</html>

04Promisr对象的then参数中的函数的返回值

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        then参数中的函数返回值：
            1，返回Promise实例对象，则返回的该实例对象可以调用下一个then
            2，返回普通数据，返回的普通数据会传递给下一个then参数中函数的参数接收值
     -->

    <script>
        // 封装函数
        function queryData(url) {
            var p = new Promise(function (resoive, reject) {
                // 实现ajax异步任务
                var xhr = new XMLHttpRequest()
                xhr.open("get", url)
                xhr.send()
                // 处理返回结果
                xhr.onreadystatechange = function (data) {
                    if (xhr.readyState == 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            // 请求成功
                            resoive(xhr.responseText)
                        } else {
                            // 请求失败
                            reject("请求失败")
                        }
                    }
                }
            })
            return p
        }
        // 发送多个ajax请求，并且保证请求顺序
        queryData("http://127.0.0.1:5000/news_detail/2").then(function (data) {
            console.log(data);
            return queryData("http://127.0.0.1:5000/img_code?phone=15612121212")
        }).then(function (data) {//此时的then是return返回的p对象
            console.log(data);
            return data
        }).then(function (data) {//此时的data就是上一个then的data
            console.log(data);
        })
    </script>
</body>

</html>

05Promise常用的实例方法

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        Promise三个实例方法：
            p.then() 处理异步任务的返回结果
            p.catch() 获取异常信息
            p.finally() 请求成功与否都会执行
     -->
    <script>
        // console.dir(Promise)
        function foo() {
            return new Promise(function (resoive, reject) {
                setTimeout(function () {
                    // resoive(123)//请求成功执行
                    reject("请求失败")
                }, 100)
            })
        }
        foo()
            .then(function (data) {//处理成功的请求
                console.log(data);
            }, function (data) {//处理错误的请求
                console.log(data);
            })
            .catch(function (data) {//data接收异常信息，没有异常信息就不执行
                console.log(data);
            })
            .finally(function (data) {//无论请求是否成功，都会执行
                console.log("finally");
            })
    </script>
</body>

</html>

06Promise常用的对象方法

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 
        Promise对象方法
            all()并发处理多个异步任务，所有任务都执行完成才能得到结果
                Promise.all([Promise实例对象...]).then((res)=>{
                    所有任务都执行完成才能得到结果res
                })
            race()并发处理多个异步任务，只要有一个任务完成就能得到结果
                Promise.race([Promise实例对象...]).then((res)=>{
                    只要有一个任务完成就能得到结果-返回最快返回的结果
                })
     -->
    <script>
        // 封装函数
        function queryData(url) {
            var p = new Promise(function (resoive, reject) {
                // 实现ajax异步任务
                var xhr = new XMLHttpRequest()
                xhr.open("get", url)
                xhr.send()
                // 处理返回结果
                xhr.onreadystatechange = function (data) {
                    if (xhr.readyState == 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            // 请求成功
                            resoive(xhr.responseText)
                        } else {
                            // 请求失败
                            reject("请求失败")
                        }
                    }
                }
            })
            return p
        }

        // 三个异步任务
        var p1 = queryData("http://127.0.0.1:5000/news_detail/2")
        var p2 = queryData("http://127.0.0.1:5000/img_code?phone=15612121212")
        var p3 = queryData("http://127.0.0.1:5000/news_list?id=3")

        // 并发执行
        // Promise.all([p1, p2, p3]).then((res) => {
        //     console.log(res);
        // })
        Promise.race([p1, p2, p3]).then((res) => {
            console.log(res);
        })
    </script>
</body>

</html>