前端ES6(5)——Promise

最新推荐文章于 2024-07-24 10:40:52 发布

Java小生不才

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量100

点赞数

分类专栏： Ajax html 文章标签：前端 es6

本文链接：https://blog.csdn.net/qq_41596346/article/details/121003048

版权

html 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

Ajax

3 篇文章 0 订阅

订阅专栏

1.由来

在 JavaScript 的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致 JavaScript 的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现。一旦有一连串的 ajax 请求 a,b,c,d… 后面的请求依赖前面的请求结果，就需要层层嵌套。这种缩进和层层嵌套的方式，非常容易造成上下文代码混乱，我们不得不非常小心翼翼处理内层函数与外层函数的数据，一旦内层函数使用了上层函数的变量，这种混乱程度就会加剧…总之，这种层叠上下文的层层嵌套方式，着实增加了神经的紧张程度。

2.案例

案例：用户登录，并展示该用户的各科成绩。在页面发送两次请求：

查询用户，查询成功说明可以登录
查询用户成功，查询科目
根据科目的查询结果，获取去成绩
分析：此时后台应该提供三个接口，一个提供用户查询接口，一个提供科目的接口，一个提供各科成绩的接口，为了渲染方便，最好响应 json 数据。在这里就不编写后台接口了，而是提供三个 json 文件，直接提供 json 数据，模拟后台接口：

2.1.user.json

{
    "id": 1,
    "name": "小生不才",
    "password": "123456"
}

2.2.user_corse_1.json

{
    "id": 10,
    "name": "java"
}

2.3.coese_score_10.json

{
    "id": 100,
    "score": 90
}

2.4.案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>promise</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <script>
         //1、查出当前用户信息
        //2、按照当前用户的id查出他的课程
        //3、按照当前课程id查出分数
        //常规写法
        $.ajax({
            url: "mock/user.json",
            success(data) {
                console.log("查询用户：", data);
                $.ajax({
                    url: `mock/user_corse_${data.id}.json`,
                    success(data) {
                        console.log("查询到课程：", data);
                        $.ajax({
                            url: `mock/corse_score_${data.id}.json`,
                            success(data) {
                                console.log("查询到分数：", data);
                            },
                            error(error) {
                                console.log("查询分数出现异常了：" + error);
                            }
                        });
                    },
                    error(error) {
                        console.log("查询课程出现异常了：" + error);
                    }
                });
            },
            error(error) {
                console.log("查询用户出现异常了：" + error);
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

3.promise代码

  //Promise写法
 //1、Promise可以封装异步操作
 let p = new Promise((resolve, reject) => {
     //1、异步操作
     $.ajax({
         url: "mock/user.json",
         success: function (data) {
             console.log("查询用户成功:", data)
             resolve(data);
         },
         error: function (err) {
             reject(err);
         }
     });
 });

  p.then((obj) => {
       return new Promise((resolve, reject) => {
           $.ajax({
               url: `mock/user_corse_${obj.id}.json`,
               success: function (data) {
                   console.log("查询用户课程成功:", data)
                   resolve(data);
               },
               error: function (err) {
                   reject(err)
               }
           });
       })
   }).then((data) => {
       console.log("上一步的结果", data)
       $.ajax({
           url: `mock/corse_score_${data.id}.json`,
           success: function (data) {
               console.log("查询课程得分成功:", data)
           },
           error: function (err) {
           }
       });
   })

在这里插入图片描述

封装promise

//封装Promise
function get(url, data) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: url,
            data: data,
            success: function (data) {
                resolve(data);
            },
            error: function (err) {
                reject(err)
            }
        })
    });
}

get("mock/user.json")
     .then((data) => {
         console.log("用户查询成功~~~:", data)
         return get(`mock/user_corse_${data.id}.json`);
     })
     .then((data) => {
         console.log("课程查询成功~~~:", data)
         return get(`mock/corse_score_${data.id}.json`);
     })
     .then((data)=>{
         console.log("课程成绩查询成功~~~:", data)
     })
     .catch((err)=>{
         console.log("出现异常",err)
     });

在这里插入图片描述

4.完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>promise</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
    <script>
         //1、查出当前用户信息
        //2、按照当前用户的id查出他的课程
        //3、按照当前课程id查出分数
        //常规写法
        // $.ajax({
        //     url: "mock/user.json",
        //     success(data) {
        //         console.log("查询用户：", data);
        //         $.ajax({
        //             url: `mock/user_corse_${data.id}.json`,
        //             success(data) {
        //                 console.log("查询到课程：", data);
        //                 $.ajax({
        //                     url: `mock/corse_score_${data.id}.json`,
        //                     success(data) {
        //                         console.log("查询到分数：", data);
        //                     },
        //                     error(error) {
        //                         console.log("查询分数出现异常了：" + error);
        //                     }
        //                 });
        //             },
        //             error(error) {
        //                 console.log("查询课程出现异常了：" + error);
        //             }
        //         });
        //     },
        //     error(error) {
        //         console.log("查询用户出现异常了：" + error);
        //     }
        // });
        console.log("-------------------------------------");


        //Promise写法
         //1、Promise可以封装异步操作
        // let p = new Promise((resolve, reject) => {
        //     //1、异步操作
        //     $.ajax({
        //         url: "mock/user.json",
        //         success: function (data) {
        //             console.log("查询用户成功:", data)
        //             resolve(data);
        //         },
        //         error: function (err) {
        //             reject(err);
        //         }
        //     });
        // });

        // p.then((obj) => {
        //     return new Promise((resolve, reject) => {
        //         $.ajax({
        //             url: `mock/user_corse_${obj.id}.json`,
        //             success: function (data) {
        //                 console.log("查询用户课程成功:", data)
        //                 resolve(data);
        //             },
        //             error: function (err) {
        //                 reject(err)
        //             }
        //         });
        //     })
        // }).then((data) => {
        //     console.log("上一步的结果", data)
        //     $.ajax({
        //         url: `mock/corse_score_${data.id}.json`,
        //         success: function (data) {
        //             console.log("查询课程得分成功:", data)
        //         },
        //         error: function (err) {
        //         }
        //     });
        // })
        console.log("-------------------------------------");

        //封装Promise
        function get(url, data) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: url,
                    data: data,
                    success: function (data) {
                        resolve(data);
                    },
                    error: function (err) {
                        reject(err)
                    }
                })
            });
        }

        get("mock/user.json")
            .then((data) => {
                console.log("用户查询成功~~~:", data)
                return get(`mock/user_corse_${data.id}.json`);
            })
            .then((data) => {
                console.log("课程查询成功~~~:", data)
                return get(`mock/corse_score_${data.id}.json`);
            })
            .then((data)=>{
                console.log("课程成绩查询成功~~~:", data)
            })
            .catch((err)=>{
                console.log("出现异常",err)
            });

    </script>
</body>
</html>

Java小生不才

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端ES6(5)——Promise

1.由来在 JavaScript 的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致 JavaScript 的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现。一旦有一连串的 ajax 请求 a,b,c,d… 后面的请求依赖前面的请求结果，就需要层层嵌套。这种缩进和层层嵌套的方式，非常容易造成上下文代码混乱，我们不得不非常小心翼翼处理内层函数与外层函数的数据，一旦内层函数使用了上层函数的变量，这种混乱程度就会加剧…总之，这种层叠上下文的层层嵌套方式，着实增加了神经的紧张程度。
复制链接

扫一扫

专栏目录