23vue3铺垫知识——ES6模块化与异步编程高级用法

news2024/11/20 20:31:41

文章目录

  • 一、ES6模块化
    • 1、回顾:nodejs中如何实现模块化
    • 2、前端模块化规范的分类
    • 3、什么是ES6模块化规范
    • 4、在nodeis中体验ES6模块化
    • 5、ES6模块化的基本语法
      • 5.1 默认导出与默认导入
      • 5.2 按需导出与按需导入
      • 5.3直接导入并执行模块中的代码
  • 二、Promise
    • 1、回调地狱
      • 1.1 如何解决回调地狱的问题
      • 1.2 Promise的基本概念
    • 2、基于回调函数按顺序读取文件内容
    • 3、基于then-fs读取文件内容
      • 3.1 then-fs的基本使用
      • 3.2 then()方法特性
      • 3.3 基于Promise按顺序读取文件的内容
      • 3.4 通过catch捕获错误
      • 3.4 通过.catch捕获错误
      • 3.5 Promise.all() 方法
      • 3.6 Promise.race()方法
    • 4、基于Promise封装读文件的方法
      • 4.1 getFile方法的基本定义
      • 4.2 创建具体的异步操作
      • 4.3 获取then的两个实参
      • 4.4 调用resolve和reject回调函数
  • 三、async/await
    • 1、什么是async/await
    • 2、async/await的基本使用
    • 3、async/await的使用注意事项
  • 四、EventLoop
    • 1、JavaScript是单线程的语言
    • 2、同步任务和异步任务
    • 3、同步任务和异步任务的执行过程
    • 4、EventLoop的基本概念
      • 4.1 结合EventLoop分析输出的顺序
  • 五、宏任务与微任务
    • 1、什么是宏任务和微任务
    • 2、宏任务与微任务的执行顺序
    • 3、类比:去银行办业务的场景
    • 4、分析以下代码输出的顺序
    • 5、经典面试题
  • 六、API接口案例
    • 1、案例需求
    • 2、主要的实现步骤
    • 3、搭建项目的基本结构
    • 4、创建基本的服务器
    • 5、创建db数据库操作模块
    • 6、创建user_ctrl模块
    • 7、创建user_router模块
    • 8、导入并挂载路由模块
    • 9、使用try...catch捕获异常

目标:
1、ES6模块化
2、Promise
3、async/await
4、EventLoop
5、宏任务与微任务
6、API接口案例

一、ES6模块化

1、回顾:nodejs中如何实现模块化

node.js遵循了Commonjs的模块化规范。其中:
导入其它模块使用require()方法
模块对外共享成员使用module.exports对象

模块化的好处:
大家都遵守同样的模块化规范写代码,降低了沟通的成本,极大方便了各个模块之间的相互调用,利人利己。

2、前端模块化规范的分类

在ES6 模块化规范诞生之前,lavaScript社区已经尝试并提出了AMD、CMD、Commons等模块化规范。

但是,这些由社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准,例如:
AMD和CMD适用于浏览器端的Javascript模块化
CommonjS适用于服务器端的Javascript模块化

太多的模块化规范给开发者增加了学习的难度与开发的成本。因此,大一统的 ES6 模块化规范诞生了!

3、什么是ES6模块化规范

ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学
习成本,开发者不需再额外学习AMD、CMD或CommonlS等模块化规范。

ES6模块化规范中定义:
· 每个js文件都是一个独立的模块
· 导入其它模块成员使用import关键字
· 向外共享模块成员使用export关键字

4、在nodeis中体验ES6模块化

node.is中默认仅支持 Commonls模块化规范,若想基于nodeis体验与学习ES6的模块化语法,可以按照
如下两个步骤进行配置:
①确保安装了v14.15.1或更高版本的nodeis
在这里插入图片描述
②在packagejson的根节点中添加"type":“module"节点
在这里插入图片描述
在vs code终端中输入npm init -y命令并回车,在出现的package.json包中加入根节点type”:"module
在这里插入图片描述

5、ES6模块化的基本语法

ES6的模块化主要包含如下3种用法:
① 默认导出与默认导入
②按需导出与按需导入
③直接导入并执行模块中的代码

5.1 默认导出与默认导入

默认导出的语法:export default 默认导出的成员
在这里插入图片描述

每个模块中,只允许使用唯一的一次exportdefault,否则会报错!

默认导入的语法:import 接收名称from’模块标识符
在这里插入图片描述

默认导入时的接收名称可以任意名称,只要是合法的成员名称即可:

5.2 按需导出与按需导入

按需导出的语法:export按需导出的成员
在这里插入图片描述

按需导入的语法:import{s1}from模块标识符!
在这里插入图片描述

①每个模块中可以使用多次按需导出
②按需导入的成员名称必须和按需导出的名称保持一致
③按需导入时,可以使用as关键字进行重命名
④按需导入可以和默认导入一起使用

在这里插入图片描述
在这里插入图片描述

5.3直接导入并执行模块中的代码

如果只想单纯地执行某个模块中的代码,并不需要得到模块中向外共享的成员。此时,可以直接导入并执行模块代码,示例代码如下:
在这里插入图片描述

二、Promise

1、回调地狱

多层回调函数的相互嵌套,就形成了回调地狱。示例代码如下:
在这里插入图片描述
回调地狱的缺点:
· 代码耦合性太强,牵一发而动全身,难以维护
· 大量冗余的代码相互嵌套,代码的可读性变差

1.1 如何解决回调地狱的问题

为了解决回调地狱的问题,ES6(ECMAScript2015)中新增了Promise的概念。

1.2 Promise的基本概念

①Promise 是一个构造函数
·我们可以创建Promise的实例constp=newPromise()
·new出来的Promise实例对象,代表一个异步操作

②Promise.prototype 上包含一个.then()方法
· 每一次newPromise()构造函数得到的实例对象,
· 都可以通过原型链的方式访问到then()方法,例如p.then()

③.then() 方法用来预先指定成功和失败的回调函数
· p.then(成功的回调函数,失败的回调函数)
· p.then(result => {}, error => {})
· 调用then()方法时,成功的回调函数是必选的、失败的回调函数是可选的

2、基于回调函数按顺序读取文件内容

3、基于then-fs读取文件内容

由于nodeis 官方提供的fs 模块仅支持以回调函数的方式读取文件,不支持 Promise 的调用方式。因此,需要先运行如下的命令,安装then-fs这个第三方包,从而支持我们基于Promise的方式读取文件的内容:
在这里插入图片描述

3.1 then-fs的基本使用

调用then-fs提供的readFile()方法,可以异步地读取文件的内容,它的是返回值是 Promise 的实例对象。因此可以调用.then()方法为每个Promise异步操作指定成功和失败之后的!回调函数。示例代码如下:
在这里插入图片描述

注意:上述的代码无法保证文件的读取顺序,需要做进一步的改进!

3.2 then()方法特性

如果上一个.then()方法中返回了一个新的 Promise实例对象,则可以通过下一个then()继续进行处理。通过.then()方法的链式调用,就解决了回调地狱的问题。

3.3 基于Promise按顺序读取文件的内容

Promise 支持链式调用,从而来解决回调地狱的问题。示例代码如下:
在这里插入图片描述

3.4 通过catch捕获错误

在Promise的链式操作中如果发生了错误,可以使用 Promise.prototvpecatch方法进行捕获和处理
在这里插入图片描述

3.4 通过.catch捕获错误

如果不希望前面的错误导致后续的.then无法正常执行,则可以将.catch的调用提前,示例代码如下:
在这里插入图片描述

3.5 Promise.all() 方法

Promise.all()方法会发起并行的Promise异步操作,等所有的异步操作全部结束后才会执行下一步的then
操作(等待机制)。示例代码如下:
在这里插入图片描述
注意:数组中 Promise实例的顺序就是最终结果的顺序!

3.6 Promise.race()方法

Promise.race()方法会发起并行的Promise异步操作,只要任何一个异步操作完成,就立即执行下一步的.then操作(赛跑机制)。示例代码如下:
在这里插入图片描述

4、基于Promise封装读文件的方法

方法的封装要求:
①方法的名称要定义为getFile
②方法接收一个形参fpath,表示要读取的文件的路径
③方法的返回值为Promise实例对象

4.1 getFile方法的基本定义

在这里插入图片描述
注意:第5行代码中的 newPromise()只是创建了一个形式上的异步操作。

4.2 创建具体的异步操作

如果想要创建具体的异步操作,则需要在newPromise()构造函数期间,传递一个function函数,将具体的异步操作定义到 function 函数内部。示例代码如下:
在这里插入图片描述

4.3 获取then的两个实参

通过.then()指定的成功和失败的回调函数,可以在function的形参中进行接收,示例代码如下:在这里插入图片描述

4.4 调用resolve和reject回调函数

Promise 异步操作的结果,可以调用resolve或reiect回调函数进行处理。示例代码如下:
在这里插入图片描述
成功的回调函数:
在这里插入图片描述
失败的回调函数:
在这里插入图片描述
(err)可以不写,可以直接写.catch()
在这里插入图片描述

三、async/await

1、什么是async/await

async/await是ES8(ECMAScript 2017)引入的新语法,用来简化 Promise 异步操作。在async/await出现之前,开发者只能通过链式.then()的方式处理Promise异步操作。示例代码如下:
在这里插入图片描述
.then链式调用的优点:解决了回调地狱问题
.then链式调用的缺点:代码冗余、阅读性差、不易理解

2、async/await的基本使用

使用async/await简化Promise异步操作的示例代码如下:
在这里插入图片描述

3、async/await的使用注意事项

①当返回值是promise()的实例对象时,用await修饰后会直接读取内容
②如果在function中使用了await,则function必须被async修饰
③ 在asvnc 方法中,第一个await之前的代码会同步执行,await之后的代码会异步执行在这里插入图片描述
遇到await,之后的代码先不执行,退出函数先输出C,然后回过头执行await之后的代码(函数内部)

四、EventLoop

1、JavaScript是单线程的语言

JavaScript是一门单线程执行的编程语言。也就是说,同一时间只能做一件事情。
在这里插入图片描述
单线程执行任务队列的问题:
如果前一个任务非常耗时,则后续的任务就不得不一直等待,从而导致程序假死的问题。

2、同步任务和异步任务

为了防止某个耗时任务导致程序假死的 问题,JavaScript把待执行的任务分为了两类:
①同步任务(synchronous)
· 又叫做非耗时任务,指的是在主线程上排队执行的那些任务
· 只有前一个任务执行完毕,才能执行后一个任务
②异步任务(asynchronous)
· 又叫做耗时任务,异步任务由lavaScript委托给宿主环境进行执行
· 当异步任务执行完成后,会通知JavaScript主线程执行异步任务的回调函数

3、同步任务和异步任务的执行过程

在这里插入图片描述
①同步任务由JavaScript主线程次序执行
②异步任务委托给宿主环境执行
③已完成的异步任务对应的回调函数,会被加入到任务队列中等待执行
④JavaScript主线程的执行栈被清空后,会读取任务队列中的回调函数,次序执行
⑤ JavaScript主线程不断重复上面的第4步

4、EventLoop的基本概念

JavaScript 主线程从“任务队列”中读取异步任务的回调函数,放到执行栈中依次执行。这个过程是循环不断的,所以整个的这种运行机制又称为EventLoop(事件循环)。

4.1 结合EventLoop分析输出的顺序

在这里插入图片描述
正确的输出结果:ADCB。其中:
· A和D属于同步任务。会根据代码的先后顺序依次被执行
· C和 B属于异步任务。它们的回调函数会被加入到任务队列中,等待主线程空闲时再执行。
而setTimeout()延时器延时时间为0毫秒,所以会直接将回调函数放入任务队列,readFile()的回调函数会放在延时器回调函数之后,所以优先输出C,再B。

五、宏任务与微任务

1、什么是宏任务和微任务

JavaScript把异步任务又做了进一步的划分,异步任务又分为两类,分别是:

①宏任务(macrotask)
· 异步Ajax请求、
· setTimeout、setinterval
· 文件操作
· 其它宏任务

②微任务(microtask)
· Promise.then、.catch和.finally
· process.nextTick
· 其它微任务
在这里插入图片描述

2、宏任务与微任务的执行顺序

在这里插入图片描述

3、类比:去银行办业务的场景

①小云和小腾去银行办业务。首先,需要取号之后进行排队
· 宏任务队列
②假设当前银行网点只有一个柜员,小云在办理存款业务时,小腾只能等待
· 单线程,宏任务按次序执行
③小云办完存款业务后,柜员询问他是否还想办理其它业务?
· 当前宏任务执行完,检查是否有微任务
④小云告诉柜员:想要买理财产品、再办个信用卡、最后再兑换点马年纪念币?
· 执行微任务,后续宏任务被推迟
⑤小云离开柜台后,柜员开始为小腾办理业务
· 所有微任务执行完毕,开始执行下一个宏任务

4、分析以下代码输出的顺序

在这里插入图片描述
当new一个实例时,后面的function会作为同步任务执行

5、经典面试题

在这里插入图片描述
正确的输出顺序:156234789
.then为微任务

六、API接口案例

1、案例需求

基于MySOL 数据库+Express对外提供用户列表的API接口服务。用到的技术点如下:
· 第三方包express和mysgl2
· ES6模块化
· Promise
· async/await

2、主要的实现步骤

① 搭建项目的基本结构
②创建基本的服务器
③创建db数据库操作模块
④创建user_ctrl业务模块
⑤创建user_router路由模块

3、搭建项目的基本结构

①启用ES6模块化支持
· 在package.ison中声明" type":"module "
②安装第三方依赖包
· 运行npm install express@4.17.1 mysql2@2.2.5

4、创建基本的服务器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5、创建db数据库操作模块

在这里插入图片描述

6、创建user_ctrl模块

在这里插入图片描述

7、创建user_router模块

在这里插入图片描述

8、导入并挂载路由模块

在这里插入图片描述
import写在所有模块头部

9、使用try…catch捕获异常

在这里插入图片描述

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

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

相关文章

iptables 限制转发

概述 可以通过设置内核参数来启动或停止内核的转发 sysctl -w net.ipv4.ip_forward1当开启了Linux内核转发 cat /proc/sys/net/ipv4/ip_forward开启内核转发后,当Linux主机收到不属于自己IP的数据包时,将会根据主机上配置的路由表进行转发&#xff0c…

kubernetes的二进制安装

二进制搭建 Kubernetes v1.20 k8s集群master01:192.168.232.37 kube-apiserver kube-controller-manager kube-scheduler etcd k8s集群master02:192.168.232.7 k8s集群node01:192.168.232.47 kubelet kube-proxy docker k8s集群node…

Android jar包的生成与使用

前言 Android中常见的第三方库有: *.so,*.jar,*.aar,今天给大家分享一下jar文件,在Android应用程序开发中,我们需要使用一些Java库,可能这个库是自己封装好的或者第三方的库,我们每…

收入指引令人失望,股票回购不积极,满帮(YMM)面临监管风险

来源:猛兽财经 作者:猛兽财经 收入指引令人失望 上个月末,满帮(YMM)公布了2023年第一季度的财务业绩,同时还公布了2023年第二季度的管理指引。 满帮预计其2023年第二季度的收入将在19.10亿元至20.10亿元之…

【SwinFusion:通用网络框架 :Swin Transformer】

SwinFusion: Cross-domain Long-range Learning for General Image Fusion via Swin Transformer (SwinFusion:基于Swin Transformer的跨域远程学习通用图像融合) 提出了一种基于跨域远程学习和Swin Transformer的通用图像融合框架SwinFusi…

粮油质量追溯系统源码,MES生产加工管理系统

粮油生产质量追溯系统,实现一物一码,全程追溯,正向追踪,逆向溯源。 技术架构:spring bootmybatiseasyuimysql 。 粮油生产质量追溯系统实现种植主体、种植基地、生产计划、压榨、精炼、包装、销售、物料管理、检验检测…

AI绘画:Roop插件的使用详解!

roop插件有哪些特性,如果安装,已经在上一篇讲的非常详细了。不知道你们装得怎么样了? 今天,来详细的说一说roop插件的使用。 首先呢启动我们的Stable-Diffusion-WebUI,然后确保插件已经启用! 选择好模型&a…

【Spring Boot 初识丨七 丨外部化配置(一)】属性详解

上一篇讲了 Spring Boot 的依赖注入 本篇来讲一讲Spring Boot 外部化配置 Spring Boot 初识: 【Spring Boot 初识丨一】入门实战 【Spring Boot 初识丨二】maven 【Spring Boot 初识丨三】starter 【Spring Boot 初识丨四】主应用类 【Spring Boot 初识丨五】beans …

35岁的社区网格长李宝东,半个月搭建出一套网格化安全管理系统

2020年以来,网格化治理在陕西省榆林市榆阳区驼峰路街道的各个社区广泛应用。为了给社区群众提供高效、快捷的服务,驼峰路街道按照“11N”模式给社区配备服务人员。 网格员们穿梭于各个社区中,或是对平房、小区及商户进行常规巡查&#xff0c…

如何在 Spring Boot 中使用 OAuth2

在 Spring Boot 中使用 OAuth2 OAuth2 是一种授权协议,用于授权第三方应用程序访问受保护的资源。Spring Security 是一个强大的安全框架,支持 OAuth2 协议。在本文中,我们将介绍如何在 Spring Boot 中使用 Spring Security 实现 OAuth2 认证…

数据库性能优化必读,AntDB-M数据库的哈希索引设计

数据库加快访问速度的关键技术之一就是索引,索引的设计及使用方式极大程度上影响了数据库的性能。AntDB-M支持Hash、BTree两种索引类型。本文主要讲解Hash索引的相关设计,并给出一些使用建议。 1. 相关概念 桶 用于定位索引记录的容器,容器中…

python学习——列表

一、列表介绍 可以将列表视作一个容器,里面可以存储多个元素。这些元素可以是不同的数据类型。 二、列表的操作 2.1.列表的创建 方式一:使用中括号[]进行列表的创建,元素之间使用英文的逗号隔开。例如 在上图中,lst1是列表对象名…

Ant Design Vue - table实现跨页选择

实现下图跨页选择效果 :rowSelection"{ onSelect: onSelect, onSelectAll: onSelectAll, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"onSelectChange(selectedRowKeys, selectionRows) {console.log(select, this.selectedRowKeys, this.selecte…

ActiveMQ消息队列主从集群

文章目录 1.ActiveMQ消息队列主从集群模式1.1.主从集群架构1.2.环境规划 2.部署ActiveMQ主从高可用集群2.1.部署Zookeeper集群2.1.1.搭建Zookeeper三节点2.1.2.配置Zookeeper三节点2.1.3.配置Zookeeper各个节点的myid2.1.4.启动Zookeeper集群 2.2.部署ActiveMQ主从集群2.2.1.部…

解决90%面试问题!GitHub顶级“Java面试手册“了解下八股文天花板

前言 身为java开发工程师的你找到自己满意的工作了吗?又或者还在面试的路上经历一次又一次的失败。迟迟找不到正确的开门砖,也许你的技术能力可能并不差但就是在面试上得不到充分的证明。 而那些成功拿下自己满意的开发工作的人又是怎样做到的呢?我这一路走来也有…

2023下半年杭州/广州/深圳软考(中/高级)认证,进入备考

软考是全国计算机技术与软件专业技术资格(水平)考试(简称软考)项目,是由国家人力资源和社会保障部、工业和信息化部共同组织的国家级考试,既属于国家职业资格考试,又是职称资格考试。 系统集成…

Svg基本使用

1.说明 双闭合标签&#xff0c;默认宽度和高度300*150 svg绘制图形务必在svg标签内使用 ,可以通过样式设置宽高 svg与canvas区别就是它并不是图片 2.绘制直线 2.1代码展示 <linex1"100"y1"100"x2"500"y2"100"stroke"pink…

网络安全行业,面对供大于求的现状是怎么样的呢?

一、网络安全行业市场发展情况 网络时代生活越来越离不开网络&#xff0c;与此同时发生的网络安全攻击事件、非法入侵等等一系列事件都威胁着普通人的生活。没有网络安全保障&#xff0c;个人和企业等重要领域都暴露在风险之中。 二、网络安全行业人才发展需求 网络安全行业至…

【算法题】剪绳子、计算二进制中1的个数、数值的整数次方

剪绳子、计算二进制中1的个数、数值的整数次方 一、剪绳子1.1、题目描述1.2、思路1.3、代码实现&#xff1a;1.4、华丽的快速幂取余1.5、小结 二、数值的整数次方2.1、题目描述2.2、思路2.3、代码实现2.4、小结 三、计算二进制中1的个数3.1、题目描述3.2、思路3.3、代码实现3.4…

Kafka最基础使用

一、概念 2、应用场景 异步处理系统解耦流量削峰日志处理 3、消息队列的两种模式 点对点模式 消息发送者生产消息发送到消息队列中&#xff0c;然后消息接收者从消息队列中取出并且消费消息。消息被消费以后&#xff0c;消息队列中不再有存储&#xff0c;所以消息接收者不可…