ES6模块化与异步编程高级用法【一】

目录

一、ES6 模块化

1. 回顾:node.js 中如何实现模块化

node.js 遵循了 CommonJS 的模块化规范。其中:

  • 导入其它模块使用 require() 方法
  • 模块对外共享成员使用 module.exports 对象

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

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

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

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

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

3. 什么是 ES6 模块化规范

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

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

4. 在 node.js 中体验 ES6 模块化

node.js 中默认仅支持 CommonJS 模块化规范,若想基于 node.js 体验与学习 ES6 的模块化语法,可以按照

如下两个步骤进行配置:
① 确保安装了v14.15.1更高版本的 node.js node -v查看版本号

在这里插入图片描述

② 在 package.json 的根节点中添加"type": "module"节点
在这里插入图片描述
npm init -y 初始化一个包管理文件

-y 的含义:yes的意思,在init的时候省去了敲回车的步骤,生成的默认的package.json

在这里插入图片描述

5. ES6 模块化的基本语法

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

5.1 默认导出

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

5.2 默认导入

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

5.3 默认导出的注意事项

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

在这里插入图片描述

5.4 默认导入的注意事项

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

在这里插入图片描述

5.5 按需导出

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

5.6 按需导入

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

5.7 按需导出与按需导入的注意事项

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

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

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

在这里插入图片描述

二、Promise

1. 回调地狱

多层回调函数的相互嵌套,就形成了回调地狱。示例代码如下:

在这里插入图片描述

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

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

1.2 Promise 的基本概念

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

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

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

扩展:console.dir() 方法
用来对一个对象进行检查(inspect),并以易于阅读和打印的格式显示。该方法对于输入 DOM 对象非常有用,因为 dir 方法会显示DOM对象的所有属性
🔗 console.log 和 console.dir的区别

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

在这里插入图片描述

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

由于 node.js 官方提供的 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.prototype.catch 方法进行捕获和处理:

在这里插入图片描述

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 方法的基本定义

在这里插入图片描述

4.2 创建具体的异步操作

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

4.3 获取 .then 的两个实参

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

4.4 调用 resolve 和 reject 回调函数

Promise 异步操作的结果,可以调用 resolve 或 reject 回调函数进行处理。示例代码如下:
在这里插入图片描述

三、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 的使用注意事项

① 如果在 function 中使用了 await,则 function 必须被 async 修饰

② 在 async 方法中,第一个 await 之前的代码会同步执行,await 之后的代码会异步执行

在这里插入图片描述

在这里插入图片描述

四、EventLoop

1. JavaScript 是单线程的语言

JavaScript 是一门·单线程执行的编程语言。也就是说,同一时间只能做一件事情。
在这里插入图片描述

单线程执行任务队列的问题:

如果前一个任务非常耗时,则后续的任务就不得不一直等待,从而导致程序假死的问题。

2. 同步任务和异步任务

为了防止某个耗时任务导致程序假死的问题,JavaScript 把待执行的任务分为了两类:

① 同步任务(synchronous)
⚫ 又叫做非耗时任务,指的是在主线程上排队执行的那些任务
⚫ 只有前一个任务执行完毕,才能执行后一个任务

② 异步任务(asynchronous)
⚫ 又叫做耗时任务,异步任务由 JavaScript 委托给宿主环境进行执行
⚫ 当异步任务执行完成后,会通知 JavaScript 主线程执行异步任务的回调函数

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

在这里插入图片描述

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

4. EventLoop 的基本概念

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

4. 结合 EventLoop 分析输出的顺序

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

五、宏任务和微任务

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

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

宏任务(macrotask)
⚫ 异步 Ajax 请求、
⚫ setTimeout、setInterval、
⚫ 文件操作
⚫ 其它宏任务

微任务(microtask)
⚫ Promise.then、.catch 和 .finally
⚫ process.nextTick
⚫ 其它微任务

在这里插入图片描述

2. 宏任务和微任务的执行顺序

在这里插入图片描述

3. 去银行办业务的场景

① 小云和小腾去银行办业务。首先,需要取号之后进行排队
⚫ 宏任务队列

② 假设当前银行网点只有一个柜员,小云在办理存款业务时,小腾只能等待
⚫ 单线程,宏任务按次序执行

③ 小云办完存款业务后,柜员询问他是否还想办理其它业务
⚫ 当前宏任务执行完,检查是否有微任务

④ 小云告诉柜员:想要买理财产品、再办个信用卡、最后再兑换点马年纪念币?
⚫ 执行微任务,后续宏任务被推迟

⑤ 小云离开柜台后,柜员开始为小腾办理业务
所有微任务执行完毕,开始执行下一个宏任务

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

在这里插入图片描述
new promise 是同步任务,2被输出,function是微任务,setTimeout是宏任务,4是同步任务,再执行输出4,同步执行完检查是否有待执行的微任务,立马输出3,再执行宏任务,输出1

5. 经典面试题

请分析以下代码输出的顺序(代码较长,截取成了左中右 3 个部分) :
1 5 6 2 3 4 7 8 9
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

六、API 接口案例

1. 案例需求[浪费时间系列]

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

2. 主要的实现步骤

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

3. 搭建项目的基本结构

① 启用 ES6 模块化支持
⚫ 在 package.json 中声明 "type": "module"

② 安装第三方依赖包
⚫ 运行 npm install express@4.17.1 mysql2@2.2.5
注意这里mysql有一个数字2

4. 创建基本的服务器

创建app.js
在这里插入图片描述

import express from 'express'

// 调用express方法 返回值是app实例
const app = express()
// 启动服务器
app.listen(80, () => {
  console.log('serve running at http://127.0.0.1')
})

终端输入 :nodemon app.js

🔗关于nodemon的作用是不需要重复启动服务器

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

在这里插入图片描述
db文件夹下面创建index.js

import mysql from 'mysql2'

const pool = mysql.createPool({
  host: '127.0.0.1',
  port: 3306,
  database: 'my_db_01',
  user: 'root',
  password: 'root'
})

export default pool.promise()

6. 创建 user_ctrl 模块

在这里插入图片描述

7. 创建 user_router 模块

在这里插入图片描述

8. 导入并挂载路由模块

在这里插入图片描述

9. 使用 try…catch 捕获异常

在这里插入图片描述

总结

① 能够知道如何使用 ES6 的模块化语法
⚫ 默认导出与默认导入、按需导出与按需导入

② 能够知道如何使用 Promise 解决回调地狱问题
⚫ promise.then()、promise.catch()

③ 能够使用 async/await 简化 Promise 的调用
⚫ 方法中用到了 await,则方法需要被 async 修饰

④ 能够说出什么是 EventLoop
⚫ EventLoop 示意图

⑤ 能够说出宏任务和微任务的执行顺序
⚫ 在执行下一个宏任务之前,先检查是否有待执行的微任务

6.15号就开始写了,然后中间去复习了nodejs今天是6.17,天气太闷还是什么原因导致起床失败,看来还是闹钟比较有用~

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: ES6是ECMAScript 2015的简称,是JavaScript的一个重要的更新版本。深入理解ES6 PDF是一本通过深入研究ES6标准来理解其中各种语法和特性的书籍。 这本书分为十八章,从ES6的基础语法和新特性入手,详细讲解了ES6的语法、语义和使用方法。其中包括了箭头函数、简的对象字面量、模板字面量、解析器、新的控制结构、类和继承、生成器和迭代器、异步操作、Symbol和迭代器、集合和迭代器、Map和Set、新的数组方法、Promise和异步操作、代理和反射、模块和导入机制,每一章都是围绕特定的内容展开细致的解读。 对于学习ES6的开发者来说,这本书是一份非常有价值的资料。读者可以从中深入了解ES6的语言架构和语法规范,更加深入地理解JavaScript的基础和高级语言特性。对于从ES5升级到ES6的开发者来说,该书是学习ES6语言的最佳手册,还可以通过实例代码快速掌握ES6的语言特性。 总之,深入理解ES6 PDF是一本非常专业且详细的技术书籍,可以帮助读者深入了解ES6语言特性,并掌握新的编程技巧。 ### 回答2: ES6是Javascript的下一代语言标准,它引入了许多新的语法、特性和API,使得编程变得更加简单、高效、灵活和快捷。深入理解ES6 PDF是一本ES6入门指南,它帮助读者系统地学习ES6的核心知识和技能,了解ES6的语法、模块、类、迭代器、生成器、Promise等核心概念及其实践应用。 阅读深入理解ES6 PDF,首先需要了解ES6的基本语法和新特性,包括箭头函数、模板字符串、解构赋值、默认参数、rest参数等。其次,需要学习ES6的模块设计,了解如何实现模块导出、导入、依赖管理等功能,以便更好地组织代码和提高代码的复用性。另外,深入理解ES6 PDF也介绍了ES6的面向对象编程特性,包括类的声明、方法的定义、继承、多态等,以及ES6的迭代器、生成器、Promise等核心概念及其实践应用,使得读者可以更加深入地掌握ES6的精髓和应用。 综上所述,深入理解ES6 PDF是一本非常好的ES6入门指南,它帮助读者了解ES6的核心知识和技能,带领读者建立ES6的编程思想和风格,以便更好地应对现代Web应用开发的挑战,同时也是学习ES6语言的必备指南。 ### 回答3: 《深入理解ES6》是一本详细介绍ES6新特性的书籍。它主要介绍了模板字符串、解构赋值、箭头函数、类、模块开发等ES6的新语法。通过深入阅读这本书,能够更好地理解和运用ES6的新特性。 其中,模板字符串是ES6引入的一个非常重要的新特性,它可以让我们更方便地处理字符串拼接和换行,同时还支持常用的字符串操作方法。 解构赋值则是ES6中的另一个重要特性,它可以让我们更快捷地从一个对象或数组中提取出需要的值,这对于提高代码的可读性和复用性都非常有帮助。 箭头函数是ES6中的又一个新特性,它可以让我们更愉悦地编写函数,并且它的this指向也更加方便和易懂。同时也是优ES5语言中函数语法臃肿和拖沓的问题。 类是ES6中一个重要的新特性,它可以让我们更加方便地实现面向对象编程,这是在ES5中较为繁琐的过程,同时也减少了ES5类的一些使用致命局限。 最后,模块开发也是ES6中的一个重要特性,它可以让我们更加方便地组织和管理代码,同时也减少了代码间的相互污染,使得代码更加易于维护和扩展。 总之,《深入理解ES6》这本书为我们深入了解ES6的新特性提供了很好的指导和方向,并且还有配套的演示代码,非常值得一读。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值