Promise--代码实现-- ajax 传统方式和 promise 方式和 promise 代码优化/重排 方式的对比--综合代码示例

news2024/12/23 4:15:50

目录

Promise

Promise 基本介绍

 Promise 应用实例

代码实现

monster.json

monster_detail_1.json

先使用 ajax 传统方式完成, 问题分析(出现回调函数嵌套)

使用 promise 方式

示意图: 

 使用 promise 代码优化/重排 方式完成

 get.js方法

注意事项和使用细节

综合代码

student.json

class_12.json 

school_9.json

原始ajax请求

promise代码重排完成多次ajax请求

Promise

Promise 基本介绍

1. 传统的 Ajax 异步调用在需要多个操作的时候，会导致多个回调函数嵌套，导致代码不够直观，就是常说的 Callback Hell

2. 为了解决上述的问题，Promise 对象应运而生，在 EMCAScript 2015 当中已经成为标准

3. Promise 是异步编程的一种解决方案。

4. 从语法上说，Promise 是一个对象，从它可以获取异步操作的消息

5. Promise 也是 ES6 的新特性，因为比较重要，老师单独拉出来讲

一句话: Promise 是异步编程的一种解决方案, 可以解决传统 Ajax 回调函数嵌套问题

 Promise 应用实例

需求: 演示 promise 异步请求使用(如图) 

代码实现

monster.json

{

        "id": 1,

        "name": "黑山老妖"

}

monster_detail_1.json

{

        "address": "阴曹地府-黑山",

        "skill": "翻江倒海功",

        "age": 800
}

先使用 ajax 传统方式完成, 问题分析(出现回调函数嵌套)

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery-ajax多次请求</title>
    <!--引入jquery-->
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        //jquery发出ajax的方式-回顾
        $.ajax({
            url: "data/monster.json",
            success(resultData) {//如果请求成功了，回调处理函数success
                console.log("第1次ajax请求 monster基本信息=", resultData);
                //发出第二次ajax请求
                $.ajax({
                    url: `data/monster_detail_${resultData.id}.json`,
                    //下面是es6对象的方法简写形式
                    success(resultData) {
                        console.log("第2次ajax请求 monster详细信息=", resultData);

                        //$.ajax => callback hell
                        //$.ajax
                        //$.ajax
                    },
                    error(err) { //出错的回调函数
                        console.log("出现异常=", err);
                    }

                })
            },
            error(err) {
                console.log("出现异常=", err);
            }
        })

    </script>
</head>
<body>

</body>
</html>

使用 promise 方式

promise.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用promise完成多次ajax请求</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

        //先请求到monster.json
        //解读
        //1. 创建Promise对象
        //2. 构造函数传入一个箭头函数
        //3. (resolve, reject) 参数列表resolve: 如果请求成功, 调用resolve函数
        //4. 如果请求失败, 调用reject函数
        //5. 箭头函数体, 仍然是通过jquery发出ajax
        let p = new Promise((resolve, reject) => {
            //发出ajax
            $.ajax({
                url: "data/monster.json",
                success(resultData) {//成功的回调函数
                    console.log("promise发出的第1次ajax monster基本信息=", resultData);
                    resolve(resultData);
                },
                error(err) {
                    //console.log("promise 1发出的异步请求异常=", err);
                    reject(err);
                }
            })
        })

        //这里我们可以继续编写请求成功后的业务
        p.then((resultData) => {
            //这里我们可以继续发出请求
            //console.log("p.then 得到 resultData", resultData);
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: `data/monster_detail_${resultData.id}.json`,
                    success(resultData) { //第2次ajax请求成功,回调函数
                        console.log("第2次ajax请求 monster的详细信息=", resultData);
                        //继续进行下一次的请求
                        resolve(resultData);
                    },
                    error(err) { //第2次ajax请求失败,回调函数
                        //console.log("promise2 发出的异步请求异常=", err);
                        reject(err);
                    }
                })
            })
        }).then((resultData) => {

            console.log("p.then().then(), resultData", resultData)
            //即可以在这里发出第3次ajax请求=》 获取该妖怪的女友
            return new Promise((resolve, reject) => {
                $.ajax({
                    url: `data/monster_gf_${resultData.gfid}.json`,

                    success(resultData) { //第3次ajax请求成功,回调函数
                        console.log("第3次ajax请求 monster女友的详细信息=", resultData);
                        //继续进行下一次的请求
                        //resolve(resultData);
                    },
                    error(err) { //第2次ajax请求失败,回调函数
                        //console.log("promise2 发出的异步请求异常=", err);
                        //reject(err);
                    }
                })
            })

        }).catch((err) => { //这里可以对多次ajax请求的异常进行处理
            console.log("promise异步请求异常=", err);
        })
    </script>
</head>
<body>

</body>
</html>

示意图: 

 使用 promise 代码优化/重排 方式完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>promise代码重排</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">

        /**
         * 这里我们将重复的代码，抽出来,编写一个方法get
         *
         * @param url ajax请求的资源
         * @param data ajax请求携带的数据
         * @returns {Promise<unknown>}
         */
        function get(url, data) {
            return new Promise((resolve, reject) => {
                $.ajax({
                        url: url,
                        data: data,
                        success(resultData) {
                            resolve(resultData);
                        },
                        error(err) {
                            reject(err);
                        }
                    }
                )
            })
        }

        //需求: 完成
        //1. 先获取monster.json
        //2. 获取monster_detail_1.json
        //2. 获取monster_gf_2.json
        get("data/monster.json").then((resultData) => {
                //第1次ajax请求成功后的处理代码
                console.log("第1次ajax请求返回数据=", resultData);
                return get(`data/monster_detail_${resultData.id}.json`);

            }).then((resultData) => {
                //第2次ajax请求成功后的处理代码
                console.log("第2次ajax请求返回数据=", resultData);
                //return get(`data/monster_detail_${resultData.id}.json`);
                return get(`data/monster_gf_${resultData.gfid}.json`);
             }).then((resultData) => {
                //第3次ajax请求成功后的处理代码
                console.log("第3次ajax请求返回数据=", resultData);
                //继续..
            }).catch((err) => {
                console.log("promise请求异常=", err);
            })

    </script>
</head>
<body>

</body>
</html>

 get.js方法

/**
 * 这里我们将重复的代码，抽出来,编写一个方法get
 *
 * @param url ajax请求的资源
 * @param data ajax请求携带的数据
 * @returns {Promise<unknown>}
 */
function get(url, data) {
    return new Promise((resolve, reject) => {
        $.ajax({
                url: url,
                data: data,
                success(resultData) {
                    resolve(resultData);
                },
                error(err) {
                    reject(err);
                }
            }
        )
    })
}

注意事项和使用细节

1 如果返回的是 Promise 对象，可以继续执行.then()

2 .then((data)=>{}) 的 data 数据是上一次正确执行后 resolve(data) 返回传入的

3 通过多级 .then() 可以对异步请求分层次请求，实现代码重排，代码逻辑更加清晰合理

4 通过多级 .then() 后面的 .catch((err) => {}) 可捕获发生异常，便于调试

综合代码

1. 分别使用 Jquery-Ajax 和 Promise 代码重排 完成如下功能, 发出 3 次 ajax 请求, 获取对应的数据, 注意体会 Promise 发出多次 Ajax 请求的方便之处

student.json

{

        "id": 100,

        "name": "xxx",

        "class_id": 12

}

class_12.json 

{
  "id": 12,
  "name": "java",
  "student_num": 30,
  "school_id": 9
}

school_9.json

{
  "id": 9,
  "name": "清华大学",
  "address": "北京"
} 

原始ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery-ajax</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        //思路
        $.ajax({
            url: "data/student.json",
            success(data) {
                console.log("第一次ajax请求数据=", data);
                $.ajax({
                    url: `data/class_${data.class_id}.json`,
                    success(data) {
                        console.log("第2次ajax请求数据=", data);
                        $.ajax({
                            url: `data/school_${data.school_id}.json`,
                            success(data) {
                                console.log("第3次ajax请求数据=", data);
                            },
                            error(err) {
                                console.log("ajax请求发生异常:", err)
                            }
                        })
                    },
                    error(err) {
                        console.log("ajax请求发生异常:", err)
                    }
                })
            },
            error(err) {
                console.log("ajax请求发生异常:", err)
            }

        })
    </script>
</head>
<body>

</body>
</html>

promise代码重排完成多次ajax请求

其中里面的get方法前面有代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>promise代码重排完成多次ajax请求</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src="script/promise_utils.js"></script>
    <script type="text/javascript">
        //promise代码重排，完成多次ajax请求
        get("data/student_100.json").then(data => {
            console.log("第1次ajax请求, 返回的数据=", data);
            return get(`data/class_${data.class_id}.json`);
        }).then(data => {
            console.log("第2次ajax请求, 返回的数据=", data);
            return get(`data/school_${data.school_id}.json`);
        }).then(data => {
            console.log("第3次ajax请求, 返回的数据=", data);
        }).catch(err => {
            console.log("promise异步请求异常=", err);
        })

    </script>
</head>
<body>

</body>
</html>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/463298.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C语言学习分享(第五次)------函数

C语言学习分享(第五次)------函数

函数 1.前言2. 什么是函数3. 库函数3.1 为什么会有库函数3.2 如何学习库函数3.3 参考文档学习库函数3.31 strcpy函数3.32 memset函数3.33 使用库函数应该包含的头文件 4.自定义函数5.函数的参数5.1 交换两数题目详解 6. 函数的调用6.1 传址调用6.2 传值调用 7. 函数的嵌套调用和…
阅读更多...
【机器学习】P25 随机森林算法（2） 实现 “波士顿房价” 预测

【机器学习】P25 随机森林算法（2） 实现 “波士顿房价” 预测

随机森林算法 Random Forest Algorithm 随机森林算法随机森林算法实现波士顿房价预测 随机森林算法 随机森林&#xff08;Random Forest&#xff09;算法 是一种 集成学习&#xff08;Ensemble Learning&#xff09;方法&#xff0c;它由多个决策树组成&#xff0c;是一种分类…
阅读更多...
【RV1126】移植kaldi实时语音识别

【RV1126】移植kaldi实时语音识别

文章目录 算法一、环境1.1 硬件环境--RV1126开发板1.2 交叉编译器1.3 需要Cmake版本大于3.1以上 二、交叉编译sherpa2.1 下载sherpa2.2 编译sherpa2.3 运行测试 三、下载模型四、语音测试4.1 单个语音文件解码测试4.2 开发板上使用alsa架构从MIC说话测试 算法 参考&#xff1a…
阅读更多...
Mysql命令大全

Mysql命令大全

一、mysql&#xff1a;连接Mysql数据库 mysql命令用户连接数据库。 mysql命令格式&#xff1a; mysql -h主机地址 -u用户名&#xff0d;p用户密码 连接到本机上的MYSQL 首先打开DOS窗口&#xff0c;然后进入目录mysql\bin&#xff0c;再键入命令mysql -u root -p&#xff0c;回…
阅读更多...
开放式耳机有什么好处，分享几款知名度高的开放式耳机

开放式耳机有什么好处，分享几款知名度高的开放式耳机

开放式耳机是一种通过头骨传递声波的耳机&#xff0c;相比于传统的耳机&#xff0c;开放式耳机不用塞进耳道&#xff0c;而是在耳后的骨头里将声音传递到耳膜。而且因为不塞进耳朵&#xff0c;所以不用担心在使用过程中因为佩戴时间过长而导致的耳朵不适。所以相比于传统耳机来…
阅读更多...
Linux-RaiDrive把ubuntu文件远程映射到Windows上

Linux-RaiDrive把ubuntu文件远程映射到Windows上

一、准备工作 系统&#xff1a;Ubuntu18.4 使用VMware安装Ubuntu虚拟机和VMware Tools_t_guest的博客-CSDN博客 Windows软件&#xff1a;RaiDrive 链接&#xff1a;https://pan.baidu.com/s/1t9lrC9lM_EXixmKYrQjfDg?pwd05ig 提取码&#xff1a;05ig 二、实操 1.设置语言 …
阅读更多...
Ajax XHR readyState

Ajax XHR readyState

文章目录 AJAX onreadystatechange 事件onreadystatechange 事件使用回调函数 AJAX onreadystatechange 事件 onreadystatechange 事件 当请求被发送到服务器时&#xff0c;我们需要执行一些基于响应的任务。 每当 readyState 改变时&#xff0c;就会触发 onreadystatechange…
阅读更多...
记录6年时间3套easyui前端框架主题皮肤美化的设计历程

记录6年时间3套easyui前端框架主题皮肤美化的设计历程

沉寂了许久&#xff0c;是该发点东西了&#xff0c;要不然2023年都要过去一半了 &#xff01; 第一次接触Easyui前端框架&#xff0c;还是在2016年的时候&#xff0c;有个美化easyui界面的需求&#xff0c;自己是设计师&#xff0c;前端知识也只会最基本的html和css样式&#x…
阅读更多...
智慧班牌源码，使用springboot框架Java+vue2开发，二次开发方便快捷

智慧班牌源码，使用springboot框架Java+vue2开发，二次开发方便快捷

智慧校园云平台电子班牌系统源码 智慧校园平台电子班牌系统源码在大数据平台下&#xff0c;对应用系统进行统一&#xff0c;以数据互联软硬结合的特点应用在校园&#xff0c;实现对校园、班级、教师、学生的管理。 智慧校园云平台电子班牌系统源码&#xff0c;使用springboot…
阅读更多...
论文笔记：Map-Matching for low-sampling-rate GPS trajectories（ST-matching）

论文笔记：Map-Matching for low-sampling-rate GPS trajectories（ST-matching）

ACM-GIS 2019 1 Intro 将GPS数据和地图路网数据匹配提出全局地图匹配算法ST-matching&#xff08;类似于HMM的思路&#xff09; 考虑了道路网络的空间几何和拓扑结构 如果不考虑拓扑关系&#xff0c;直接进行matching的话&#xff0c;由于GPS信号的不准&#xff0c;可能轨迹会…
阅读更多...
【Java 数据结构】二叉搜索树的实现

【Java 数据结构】二叉搜索树的实现

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了 博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点!人生格言&#xff1a;当你的才华撑不起你的野心的时候,你就应该静下心来学习! 欢迎志同道合的朋友一起加油喔&#x1f9be;&am…
阅读更多...
怎么将webm格式转换成mp4，3招轻松学

怎么将webm格式转换成mp4，3招轻松学

怎么将webm格式转换成mp4&#xff1f;相对于已经广为人知的MP4&#xff0c;还有许多人对于WebM这种视频格式不太熟悉。WebM是一种免费开源的媒体文件格式。虽然Web.目前应用范围越来越广泛&#xff0c;但大家还是更习惯使用MP4&#xff0c;因为mp4是目前最为流行的视频文件格式…
阅读更多...
【MySQL】MES中，发货计划取数逻辑

【MySQL】MES中，发货计划取数逻辑

系列文章 C#底层库–MySQLBuilder脚本构建类&#xff08;select、insert、update、in、带条件的SQL自动生成&#xff09; 本文链接&#xff1a;https://blog.csdn.net/youcheng_ge/article/details/129179216 C#底层库–MySQL数据库操作辅助类&#xff08;推荐阅读&#xff0…
阅读更多...
TryHackMe-CMSpit（boot2root）

TryHackMe-CMSpit（boot2root）

CMSpit 你已确定 Web 服务器上安装的 CMS 存在多个漏洞&#xff0c;允许攻击者枚举用户并更改帐户密码。 您的任务是利用这些漏洞并破坏 Web 服务器。 端口扫扫描 循例nmap Web枚举 进80 很明显&#xff0c;cms就是Cockpit, 版本通过查看源代码的js版本可以得知是0.11.1 se…
阅读更多...
FPGA/Verilog HDL/AC620零基础入门学习——第一个项目按键控制LED

FPGA/Verilog HDL/AC620零基础入门学习——第一个项目按键控制LED

介绍 最近要考试了&#xff0c;所以我赶紧补习FPGA&#xff0c;我们用的是小梅哥的AC620开发板&#xff0c;软件是Quartus。推荐看这个视频教程&#xff1a;零基础轻松学习FPGA&#xff0c;小梅哥FPGA设计思想与验证方法视频教程 设计步骤 设计定义 用按键控制LED灯的亮灭就…
阅读更多...
YOLOv7如何提高目标检测的速度和精度，基于优化算法提高目标检测速度

YOLOv7如何提高目标检测的速度和精度，基于优化算法提高目标检测速度

目录 一、学习率调度二、权重衰减和正则化三、梯度累积和分布式训练1、梯度累积2、分布式训练 四、自适应梯度裁剪 大家好&#xff0c;我是哪吒。 上一篇介绍了YOLOv7如何提高目标检测的速度和精度&#xff0c;基于模型结构提高目标检测速度&#xff0c;本篇介绍一下基于优化算…
阅读更多...
xcode历史版本下载

xcode历史版本下载

一、背景 较早之前做过一个项目&#xff0c;当时使用swift 3.x开发。 项目结束后就没再有新需求与更新。 但最近呢需要对项目的某些功能进行调整&#xff0c;项目又重新被拾了起来。 我们知道现在的swift 版本已经到了 5.x&#xff0c; 相应的语法上较 3.x版本也有了不小的变化…
阅读更多...
从2-3-4树到红黑树原理分析以及C++实现红黑树建树

从2-3-4树到红黑树原理分析以及C++实现红黑树建树

总结规律&#xff1a; 1、2-3-4树&#xff1a;新增元素2节点合并&#xff08;节点中只有1个元素&#xff09;3节点&#xff08;节点中有2个元素&#xff09; 红黑树&#xff1a;新增一个红色节点黑色父亲节点上黑下红&#xff08;2节点---------------不要调整&#…
阅读更多...
上班族如何安排时间提高工作效率？

上班族如何安排时间提高工作效率？

对于上班族来说&#xff0c;合理安排时间可以兼顾生活和工作&#xff0c;不仅能够减少加班次数&#xff0c;还可以提高工作效率&#xff0c;减少工作中的负面情绪。但是有不少小伙伴表示&#xff0c;自己不知道如何安排时间从而提高工作效率&#xff0c;这应该怎么办呢&#xf…
阅读更多...
张勇：阿里云是一家云计算产品公司，要坚定走向“产品被集成”

张勇：阿里云是一家云计算产品公司，要坚定走向“产品被集成”

4月26日&#xff0c;在2023阿里云合作伙伴大会上&#xff0c;阿里巴巴董事会主席兼CEO、阿里云智能CEO张勇表示&#xff0c;阿里云的核心定位是一家云计算产品公司&#xff0c;生态是阿里云的根基。让被集成说到做到的核心&#xff0c;是要坚定走向“产品被集成”。 张勇表示&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023