前端技术栈二（promise模块化编程）

news2025/7/14 19:19:17

一、promise

1 Promise 基本介绍

  • 传统的 Ajax 异步调用在需要多个操作的时候，会导致多个回调函数嵌套，导致代码不够直观，就是常说的 Callback Hell
  • 为了解决上述的问题，Promise 对象应运而生，在 EMCAScript 2015 当中已经成为标准 Promise 是异步编程的一种解决方案。
  • 从语法上说，Promise 是一个对象，从它可以获取异步操作的消息
  • 一句话: Promise 是异步编程的一种解决方案, 可以解决传统 Ajax 回调函数嵌套问题

2 应用实例

2.1 需求分析/图解 

2.2 代码实现 

2.2.1 json

创建 D:\idea_java_projects\es6\promise\data\monster.json 

创建 D:\idea_java_projects\es6\promise\data\monster_detail_1.json 

2.2.2 使用 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/monster.json",
            success(resultData){
               console.log("第一次ajax请求，我们拿到了monster基本信息=",resultData);

               //进行第二次请求,此时就出现了ajax的嵌套
                $.ajax({
                    url: `data/monster_detail_${resultData.id}.json`,
                    success(resultData) {
                        console.log("第二次ajax请求，我们拿到了monster详细信息=",resultData);
                    },
                    error(err) {
                        console.log("第二次出现异常=",err)
                    }
                })
            },
            error(err){
                console.log("出现异常=",err)
            }
        })

    </script>
</head>
<body>

</body>
</html>
 2.2.3 使用 promise 方式
<!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
        let p =new Promise((resolve,reject)=>{
            //创建promise对象需要传入一个箭头函数
            //(resolve,reject)参数列表，如果请求成功调用resolve函数，失败调用reject函数
            //箭头函数体仍然是通过jquery发出ajax
            //发出ajax请求
            $.ajax({
                url:"data/monster.json",
                success(resultData){
                    console.log("promise发出的第一次ajax monster的基本信息=",resultData);
                    resolve(resultData);
                },
                error(err){
                    //console.log("promise发出的异步请求出现错误=",err)
                    reject(err);
                }
            })
        })

        //这里我们可以继续编写请求成功后的业务
        p.then(resultData=>{
            console.log("p.then得到了resultData",resultData);
            return  new Promise((resolve, reject) => {//如果没有return 那么这里的error捕获不到给p
                $.ajax({
                    url: `data/monster_detail_${resultData.id}.json`,
                    success(resultData) {
                        console.log("promise发出的第二次ajax monster的详细信息=",resultData)
                        resolve(resultData)

                    },
                    error(err) {
                        //console.log("promise第二次发出的异步请求出现错误=",err)
                        reject(err)
                    }
                })
            })

        }).then((resultData=>{
            console.log("p.then().then,resultData",resultData)
            //可以在这里发出第三次请求
        }))
            .catch(err=>{//这里可以对多次ajax的异常进行处理
            console.log(err)
        })
    </script>
</head>
<body>

</body>
</html>

 

2.2.4使用 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);
                    }
                })
            })
        }

        //需求
        //先获取monster.json
        //获取monster_detail1.json
        //进入第三次
        get("data/monster.json").then(resultData=>{
            //第一次ajax成功后的处理位置
            console.log(resultData);
            return get(`data/monster_detail_${resultData.id}.json`);
        }).then(resultData=>{
            //第二次成功后的处理代码
            console.log("第二次成功后的结果=",resultData);
            //如果还需要下一把
            //return get(url,data)以此类推
        }).catch(err=>{
            console.log(err);
        })

    </script>
</head>
<body>

</body>
</html>
 2.2.5 注意事项和使用细节
  •  如果返回的是 Promise 对象，可以继续执行.then()
  •  .then((data)=>{}) 的 data 数据是上一次正确执行后 resolve(data) 返回传入的
  •  通过多级.then() 可以对异步请求分层次请求，实现代码重排，代码逻辑更加清晰合理
  •  通过多级.then() 后面的 .catch((err) => {}) 可捕获发生异常，便于调试

 3 Promise 课后练习

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>homework</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        function get(url,data) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url:url,
                    data:data,
                    success(resultData){
                        resolve(resultData);
                    },
                    error(err){
                        reject(err);
                    }
                })
            })
        }
        get("data/student_100.json").then(resultData=>{
            console.log("第1=",resultData);
            return get(`data/class_${resultData.class_id}.json`);
        }).then(resultData=>{
            console.log("第2=",resultData);
            return get(`data/school_${resultData.school_id}.json`);
        }).then(resultData=>{
            console.log("第3=",resultData);
        }).catch(err=>{
            console.log(err);
        })
    </script>
</head>
<body>

</body>
</html>

 二、模块化编程

1介绍 

1.1基本介绍

  • 传统非模块化开发有如下的缺点：(1)命名冲突 (2)文件依赖[代码演示]
  • Javascript 代码越来越庞大，Javascript 引入模块化编程，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块
  • Javascript 使用"模 块"（module）的概念来实现模块化编程, 解决非模块化编程问题
  • 模块化 也是 ES6 的新特性

1.2 示意图 

 1.3 模块化编程分类

  • CommonJS 模块化规范/ES5 的写法
  • ES6 模块化规范

 2 CommonJS 模块编程

2.1 介绍 

  • 每个 js 文件就是一个模块，有自己的作用域。在文件中定义的变量、函数、类/对象，都是私有的，对其他 js 文件不可见
  • CommonJS 使用 module.exports={} / exports={} 导出 模块 , 使用 let/const 名称 = require("xx.js") 导入模块

2.2 应用实例 

2.2.1 需求说明 
  • 编写 functions.js , 该文件有函数,变量, 常量, 对象, 数组。。。
  • 要求在 use.js , 可以使用到 function.js 中定义的 函数/变量/常量/对象
  • 请使用模块化编程的方式完成, 尽量将各种写法都写一下
2.2.2 思路分析/图解 
 2.2.3 代码实现

function.js 

//定义对象，变量，常量，函数
const sum=function (a,b) {
    return parseInt(a)+parseInt(b);

}
const sub=function (a,b) {
    return parseInt(a)-parseInt(b);
}
let name="林然";

const PI=3.14;

const monster={
    name:"牛魔王",
    age:500,
    hi(){
        console.log("我是牛魔王，你好");
    }
}

//导出
/*
1. module.exports 导出模块
2. 把你需要导出的数据, 写入到 {}中即可
3. 可以全部导出，也可以部分导出
4. 理解：相当于把我们导出的数据，当做一个对象
5. 如果属性名和函数/变量/对象..名字相同，可以简写
6. 有些前端， 简写 module.exports={} 成 exports={}
*/
module.exports={
    sum:sum,
    sub,//简写
    myname:name
}

 use.js

//导入
//1. 在 es5 中, 我们通过 require 就包 对应.js 中的
//数据/对象，引入
//2. 我们使用的时候，通过 m.属性 就可以使用
//3. 如果我们导入时，不需要所有的，可以导入部分数据
const m=require("function");
console.log(m.myname);
console.log(m.sub(2,3));

//3. 如果我们导入时，不需要所有的，可以导入部分数据
const {sub,sum} =require("./function");
console.log(sub(1,3))
console.log(sum(1,3))
要看运行效果，需要 Node 环境 , node 环境我们后面搭建 , 只要 use.js 可以解析 sum 和
sub 说明是正确的

3 ES6 模块编程

3.1 介绍

  • ES6 使用 (1)export {名称/对象/函数/变量/常量} (2) export 定义【对象】 ={} (3) export default {}
  • 导出模块
  • 使用 import {} from "xx.js" [对应（1）（2）]/ import 名称 form "xx.js" 导入模块

3.2 应用实例-批量导出形式 

3.2.1 需求说明

  • 编写 common.js , 该文件有函数,变量, 常量, 对象
  • 要求在 use_common.js , 可以使用到 common.js 中定义的 函数/变量/常量/对象
  • 请使用 ES6 模块化编程的方式完成
3.2.2 思路分析/图解 

common.js 

//定义对象，变量，常量，函数
const sum=function (a,b) {
    return parseInt(a)+parseInt(b);

}
const sub=function (a,b) {
    return parseInt(a)-parseInt(b);
}
let name="林然";

const PI=3.14;

const monster={
    name:"牛魔王",
    age:500,
    hi(){
        console.log("我是牛魔王，你好");
    }
}
//es6 的导出模块/数据
/**
 * 老师解读
 * 1. export 就是导出模块/数据
 * 2. 可以全部导出，也可以部分导出
 */
export {
    sum,
    sub,
    name
}

use_common.js

//导入
/**
 *
 * 1. 我可以{} 来接收导出的数据
 * 2. 可以全部接收，也可以选择的接收
 * 3. 细节： 这时要求导入的名称和导出的名称一致
 */
import {sum,name,sub} from "./common"
console.log(name);

3.3 应用实例-其它导出形式

common2.js

//定义对象，变量，常量，函数
//定义对象,变量，常量, 函数
//定义 sum 函数时，就直接导出
//如果在定义时，导出的数据， 在导入时，要保持名字一致
export const sum=function (a,b) {
    return parseInt(a)+parseInt(b);

}
const sub=function (a,b) {
    return parseInt(a)-parseInt(b);
}
let name="林然";

const PI=3.14;

const monster={
    name:"牛魔王",
    age:500,
    hi(){
        console.log("我是牛魔王，你好");
    }
}
//es6 的导出模块/数据
/**
 * 老师解读
 * 1. export 就是导出模块/数据
 * 2. 可以全部导出，也可以部分导出
 */
export {
    sum,
    sub,
    name
}

use_common2.js

//导入
/**
 *
 * 1. 我可以{} 来接收导出的数据
 * 2. 可以全部接收，也可以选择的接收
 * 3. 细节： 这时要求导入的名称和导出的名称一致
 */
import {sum} from "./common2"
console.log(sum(1,3));

common3.js

//定义对象,变量，常量, 函数
//演示默认导出
//如果是默认导出， 导入的时候，使用的语法
//可以这里理解, 类似把 {} 当做一个对象导出
export default {
    sum(a,b) {
        return parseInt(a) + parseInt(b);
    },sub(a,b) {
        return parseInt(a) - parseInt(b);
    }
}
use_common3.js 
//导入默认导出模块/数据
//好处是 m 名称是可以自己指定的.
//因为 m 名字, 程序员可以自己指定，因此我们就可以解决名称冲突问题
import m from "./common3";
//使用 m.xx
console.log(m.sub(80,90));

3.4 注意事项和使用细节

  • ES6 的模块化无法在 Node.js 中执行，需要用 Babel 转码 ES5 后再执行
  • export 不仅可以导出对象，一切 JS 变量都可以导出。比如：基本类型变量、函数、数组、对象
  • 没有导出的不能使用
  • es6 有导出方式较多, 不同的导出方式对导入方式也有一定影响

4 课后作业 

4.1 作业1 

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

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

相关文章

期望28K，5.14日蚂蚁java社招一面（杭州）

期望28K，5.14日蚂蚁java社招一面（杭州）

面经哥只做互联网社招面试经历分享&#xff0c;关注我&#xff0c;每日推送精选面经&#xff0c;面试前&#xff0c;先找面经哥 1、线程池的几个参数&#xff1f; 2、一道关于线程池的代码题目&#xff0c;数据库中存任务&#xff0c;通过一个有10个核心线程和无限队列的线程池…
阅读更多...
【PyQt5】python可视化开发：PyQt5介绍，开发环境搭建快速入门

【PyQt5】python可视化开发：PyQt5介绍，开发环境搭建快速入门

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…
阅读更多...
技术人的业务爱好：第一件手工-官帽椅

技术人的业务爱好：第一件手工-官帽椅

榫卯是古典家具的主要结构方式&#xff0c;是两个构件上采用凹凸部位相结合的一种连接方式&#xff0c;其中&#xff0c;凸出部分叫榫&#xff08;或叫榫头&#xff09;&#xff0c;凹进部分叫卯&#xff08;或叫榫眼、榫槽&#xff09;。 一榫一卯之间&#xff0c;一转一折之…
阅读更多...
.net 奇葩问题调试经历之1——在红外相机获取温度时异常

.net 奇葩问题调试经历之1——在红外相机获取温度时异常

📢欢迎点赞 ：👍 收藏 ⭐留言 📝 如有错误敬请指正，赐人玫瑰，手留余香！📢本文作者：由webmote 原创📢作者格言：新的征程，我们面对的不仅仅是技术还有人心，人心不可测，海水不可量，唯有技术，才是深沉黑夜中的一座闪烁的灯塔序言 我们在研发中，经常除了造产品…
阅读更多...
深度学习增强的非线性光纤单像素成像系统

深度学习增强的非线性光纤单像素成像系统

1、光子器件的逆向设计&#xff1a;通过机器学习&#xff0c;特别是深度学习&#xff0c;可以高效地进行光子器件的逆向设计&#xff0c;这在传统的多参数优化问题中尤为重要。 2、超构表面和超材料设计&#xff1a;机器学习被用于设计具有特定光学特性的超构表面和超材料&…
阅读更多...
管道保温的介绍

管道保温的介绍

通风空调管道及各种水管的保温材料主要有&#xff1a;聚氨酯泡沫塑料保温、高级橡塑保温、酚醛泡沫塑料保温等。现对以上材料的特性、适用范围、施工要点等进行介绍&#xff0c;以供各位借鉴。 01 常用的绝热材料 1、聚氨酯泡沫塑料保温 该材料用于直埋管段的保温。在工程中…
阅读更多...
目标检测讲解

目标检测讲解

环境准备 pip install scikit-image -i https://pypi.tuna.tsinghua.edu.cn/simple图片读取&画框 from skimage import io import matplotlib.pyplot as plt import matplotlib.patches as mpss io.imread(dogs.jpg)_, ax plt.subplots(ncols1, nrows1, figsize(6, 6))…
阅读更多...
[第五名公共排行榜] LGB 连续学习 + Catboost 集成

[第五名公共排行榜] LGB 连续学习 + Catboost 集成

大家好， 首先，我想感谢竞赛组织者和所有参与讨论的人。这是@ibazhov和我在Kaggle上的第一次正式比赛，我们学到了很多，并希望未来能参与更多的比赛。 总结： 使用5个LGB模型进行连续更新/学习，通过.train(init_model)和.refit()方法，以及5个基于216个特征的Catboost模型…
阅读更多...
装备制造行业数据分析指标体系

装备制造行业数据分析指标体系

数字化飞速发展的时代&#xff0c;多品种、定制化的产品需求、越来越短的产品生命周期、完善的售后服务、极佳的客户体验和快速的交货速度等&#xff0c;使得装备制造行业的经营环境越来越复杂&#xff0c;企业竞争从拼产品、拼价格迈向拼服务&#xff0c;装备制造企业正处于数…
阅读更多...
javaSE:继承

javaSE:继承

在谈继承之前&#xff0c;我们先观察下面这个代码&#xff1a; //定义一个猫类 class Cat {public String name;public int age;public float weigth;public void eat(){System.out.println(this.name"正在吃饭");}public void mimi(){System.out.println(this.nam…
阅读更多...
校园环境气象实时监测系统

校园环境气象实时监测系统

随着物联网技术的发展越来越成熟&#xff0c;它不断地与人们的日常生活和工作深入融合&#xff0c;推动着社会的进步。其中物联网系统集成在高校实践课程中可以应用到许多项目&#xff0c;如环境气象检测、花卉种植信息化监管、水质信息化监管、校园设施物联网信息化改造、停车…
阅读更多...
经常混淆的ADC输入类型！

经常混淆的ADC输入类型！

大家好，这里是大话硬件。 这篇文章我们来聊聊ADC的输入类型。 ADC的输入类型根据ADI的官网，分为了3种类型，单端，差分，伪差分。如下图快速选型的界面所示。 同时，TI的官网对ADC的输入类型划分也是同样的3种类型。 可见，两个器件厂家对ADC的输入类型都是这样定义的。 …
阅读更多...
FPGA早鸟课程第二弹 | Vivado 设计静态时序分析和实际约束

FPGA早鸟课程第二弹 | Vivado 设计静态时序分析和实际约束

在FPGA设计领域&#xff0c;时序约束和静态时序分析是提升系统性能和稳定性的关键。社区推出的「Vivado 设计静态时序分析和实际约束」课程&#xff0c;旨在帮助工程师们掌握先进的设计技术&#xff0c;优化设计流程&#xff0c;提高开发效率。 课程介绍 关于课程 权威认证&…
阅读更多...
目标检测——YOLOv10算法解读

目标检测——YOLOv10算法解读

论文&#xff1a;YOLOv10: Real-Time End-to-End Object Detection (2024.5.23) 作者&#xff1a;Ao Wang, Hui Chen, Lihao Liu, Kai Chen, Zijia Lin, Jungong Han, Guiguang Ding 链接&#xff1a;https://arxiv.org/abs/2405.14458 代码&#xff1a;https://github.com/THU…
阅读更多...
Kimichat使用案例019：15个Kimichat提示词案例

Kimichat使用案例019：15个Kimichat提示词案例

文章目录 一、扮演招聘经理二、扮演英语教师三、文章修改润色四、模仿特定作者写文章五、扮演任何一个角色六、像董宇辉一样介绍一本书七、写商业计划书的大纲八、头脑风暴九、总结文章十、推荐书籍十一、写电子邮件十二、学习Python编程十三、Python编程十四、制作菜谱十五、写…
阅读更多...
【Python/Pytorch 】-- 滑动窗口算法

【Python/Pytorch 】-- 滑动窗口算法

文章目录 文章目录 00 写在前面01 基于Python版本的滑动窗口代码02 算法效果 00 写在前面 写这个算法原因是&#xff1a;训练了一个时序网络&#xff0c;该网络模型的时序维度为32&#xff0c;而测试数据的时序维度为90。因此需要采用滑动窗口的方法&#xff0c;生成一系列32…
阅读更多...
一种稀疏贝叶斯学习的旋转机械故障诊断方法（MATLAB）

一种稀疏贝叶斯学习的旋转机械故障诊断方法（MATLAB）

轴承的故障诊断技术是通过检测轴承故障特征信息来判断轴承的具体故障为位置或损伤程度。在轴承发生损坏时&#xff0c;故障特征信息会随着工作时间的增长变得明显。轴承的损坏过程可以分为四个阶段。第一个阶段为损伤初始阶段&#xff0c;轴承故障特征信号一般无法测量。第二个…
阅读更多...
一种基于非线性滤波过程的旋转机械故障诊断方法（MATLAB）

一种基于非线性滤波过程的旋转机械故障诊断方法（MATLAB）

在众多的旋转机械故障诊断方法中&#xff0c;包络分析&#xff0c;又称为共振解调技术&#xff0c;是目前应用最为成功的方法之一。首先&#xff0c;对激励引起的共振频带进行带通滤波&#xff0c;然后对滤波信号进行包络谱分析&#xff0c;通过识别包络谱中的故障相关的特征频…
阅读更多...
【昇思25天学习打卡营打卡指南-第一天】基本介绍与快速入门

【昇思25天学习打卡营打卡指南-第一天】基本介绍与快速入门

昇思MindSpore介绍 昇思MindSpore是一个全场景深度学习框架&#xff0c;旨在实现易开发、高效执行、全场景统一部署三大目标。 其中&#xff0c;易开发表现为API友好、调试难度低&#xff1b;高效执行包括计算效率、数据预处理效率和分布式训练效率&#xff1b;全场景则指框架…
阅读更多...
【windows|004】BIOS 介绍及不同品牌电脑和服务器进入BIOS设置的方法

【windows|004】BIOS 介绍及不同品牌电脑和服务器进入BIOS设置的方法

&#x1f341;博主简介&#xff1a; &#x1f3c5;云计算领域优质创作者 &#x1f3c5;2022年CSDN新星计划python赛道第一名 &#x1f3c5;2022年CSDN原力计划优质作者 ​ &#x1f3c5;阿里云ACE认证高级工程师 ​ &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023