ES6模块化
node.js遵循了CommonJS的模块化规范
- 导入其他模块使用require()
- 模块对外共享成员使用module.exports对象
模块化的好处
大家都遵守同样的模块化规范写代码，降低沟通成本，极大方便了各模块之间的相互调用
前端模块化分类
在ES6模块化规范诞生之前，javascript社区提出了AMD,CMD,CommonJS等模块化规范
AMD,CMD值适用于浏览器的javaScript模块化
CommonJS适用于服务器的javaScript模块化
太多模块化规范增加了开发成本，因此，ES6模块化出现了
什么是ES6模块化规范
是浏览器与服务器通用的模块化规范
es6模块化规范中定义：
- 每个js文件都是一个独立的模块
- 导入其他模块成员使用import关键字
- 向外共享模块成员使用export关键字
在node.js中体验es6模块化
node.js中，默认支持CommonJS模块化规范，若想基于node.js体验式学习es6模块化语法，可以按照如下两个步骤进行配置：
- 确保电脑已经安装v14.15.1或更高版本的node.js
- 在package.json的根节点中添加“type”:“module”节点
ES6模块化的基本语法
- 默认导入导出
- 按需导入导出
- 直接导入并执行模块中的代码
默认导出
默认导出语法：export default默认导出成员
//定义模块私有成员
let n1 = 10
//定义模块私有成员（外界访问不到 因为没有被共享出）
let n2 = 20
//定义模块私有方法 show
function show(){}
//使用export defalt默认导出语法，向外共享n1和show两个成员
export defalt{
n1,
show
}
默认导入
默认导入的语法：import接收名称from‘模块标识符’
注意事项：
- 在每个模块中，只允许使用唯一的一次export default，否则会报错
- 默认的导入时的接收名称可以任意名称，只要是合法的成员名称即可
按需导出
按需导出的语法：export按需导出的成员
//当前模块为03_m2.js
//向外按需导出变量s1
export let s1 = 'aaa'
//向外按需导出变量s2
export let s2 = 'bbb'
//向外按需导出方法say
export function say(){}
按需导入
按需导入语法：import{s1} from ‘模块标识符’
import{s1,s2,say} from './03_m2.js'
console.log(s1)
console.log(s2)
console.log(say)
注意事项：
- 每个模块中可以使用多次按需导出
- 按需导入的成员名称必须和按需导出的名称保持一致
- 按需导入时，可以使用as关键字进行重命名 例如：s2 as str2
- 按需导入可以和默认导入一起使用
直接导入并执行模块中的代码，并不需要得到模块中向外共享的成员
此时，可以直接导入并执行模块代码
Promise
回调地狱
多层回调函数相互嵌套，就形成了回调低于
回调地狱特点：
- 代码耦合性太强，牵一发而栋全身，难以维护，
- 大量冗余代码相互嵌套，代码的可读性变差
为了解决回调低于问题，ES6中新增了Promise的概念
Promise基本概念
Promise是一个构造函数
- 我们可以创建Promise的实例 const p = new Promise（）
- new出来的Promise实例对象，代表一个异步操作
Promise.prototype上包含一个.then()方法 - 每一次new Promise()构造函数得到的实例对象，
- 度可以通过原型链的方式访问到.then()方法，例如p.then()
.then()方法用来预先指定成功和失败的回调函数
- p.then(成功回调函数，失败回调函数)
- p.then(result = >{},err =>{})
- 调用.then()方法时，成功的回调函数是必选的，失败的回调函数是可选的
then-fs的基本使用
调用then-fs一共的readFile(）方法，可以比不读取文件内容，他的返回值是Promise的实例对象，因此可以调用.then()方法为每个Promise异步操作只能发成功和失败的回调函数
import thenFs from 'then-fs'
thenFs.readFile('./files/1.txt','utf8').then((r1) =>{console.log(r1)})
thenFs.readFile('./files/2.txt','utf8').then((r2) =>{console.log(r2)})
thenFs.readFile('./files/3.txt','utf8').then((r3) =>{console.log(r3)})
注意：上述的代码无法保证文件的读取顺序，需要做进一步改进
then()方法特性
如果上一个.then方法中返回一个新的Promise实例对象，则可以通过下一个.then()继续进行处理。通过下一个.then()方法的链式调用，就解决回调地狱的问题
import thenFs from 'then-fs'
thenFs
.readFile('./files/1.txt','utf8')
.then((r1) = > {
console.log(r1)
return thenFs.readFile('./files/2.txt','utf8')
})
.then((r2)=>{
console.log(r2)
return thenFs.readFile('./files/3.txt','utf8')
})
.then((r3) = > {
console.log(r3)
})
通过.catch捕获错误
通过Promise的链式操作中如果发生了错误，可以使用Promise.prototype.catch方法进行捕获和处理
import thenFs from 'then-fs'
thenFs
.readFile('./files/11.txt','utf8')
.then((r1) = > {
console.log(r1)
return thenFs.readFile('./files/2.txt','utf8')
})
.then((r2)=>{
console.log(r2)
return thenFs.readFile('./files/3.txt','utf8')
})
.then((r3) = > {
console.log(r3)
})
.catch((err) = > {
console.log(err.message)
})
如果不希望前面的错误导致后续.then无法正常执行，则可以将.catch的调用提前
import thenFs from 'then-fs'
thenFs
.readFile('./files/11.txt','utf8')
.catch((err) = > {
console.log(err.message)
})
.then((r1) = > {
console.log(r1)
return thenFs.readFile('./files/2.txt','utf8')
})
.then((r2)=>{
console.log(r2)
return thenFs.readFile('./files/3.txt','utf8')
})
.then((r3) = > {
console.log(r3)
})
promise.all()方法
Promise.all()方法会发起并行的Promise异步操作，等所有的异步操作全部结束后才会执行下一步的.then操作（等待机制）
const promiseArr = [
thenFs.readFile('./files/11.txt','utf8'),
thenFs.readFile('./files/2.txt','utf8'),
thenFs.readFile('./files/3.txt','utf8'),
]
//
Promise.all(PromiseArr)
.then(([r1,r2,r3]) = > {
console.log(r1,r2,r3)
})
.catch(err = > {
console.log(err.message)
})
Promise.race()方法
Promise.race()方法会发起并行的Promise异步操作，只要任何一个异步操作完成，就立即执行下一步的.then操作（赛跑机制）
const promise = [
thenFs.readFile('./files/1.txt','utf8'),
thenFs.readFile('./files/2.txt','utf8'),
thenFs.readFile('./files/3.txt','utf8'),
]
Promise.race(PromiseArr)
.then(result = > {
console.log(result )
})
.catch(err = > {
console.log(err.message)
})
基于Promise封装读文件的方法
方法封装要求：
- 方法的名称要定义为getFile
- 方法接收一个形参fpath，表示要读取的文件路径
- 方法的返回值为Promise实例对象
getFile方法的基本定义
//1.方法的名称为getFile
//2.方法接收一个形参fpath，表示要读取的文件的路径
function getFile(fpath){
//3.方法的返回值为Promise
return new Promise()
}
注意：第5行代码中的new Promise（）只是创建了一个形式上的异步操作
创建具体的异步操作
如果想要创建具体的异步操作，则需要在new Promise()构造函数期间，传递一个function函数，将具体的异步操作定义到function函数内部
//方法接收一个形参fpath，表示要读取的文件的路径
function getFile(fpath){
//方法的返回值为Promise的实例对象
return new Promise(function(){
//创建一个具体的读文件的异步操作
fs.readFile(fpath,'utf8',(err,dataStr) = > {})
})
}
获取.then()的两个参数
通过.then()指定的成功和失败的回调函数，可以在function的形参中进行接收
function getFile(fpath){
//resolve 形参是调用getFile()方法时，通过.then指定的"成功的"回调函数
//reject 形参是调用getFile()方法时，通过.then指定的"是百度的"回调函数
return new Promise(function(){
fs.readFile(fpath,'utf8',(err,dataStr) => {})
})
}
//getFile方法的调用过程
getFile('./files/1.txt').then()
调用resolve 和reject回调函数
Promise异步操作的结果，可以调用resolve或reject回调函数进行处理
function getFile(fpath){
//resolve 形参是调用getFile()方法时，通过.then指定的"成功的"回调函数
//reject 形参是调用getFile()方法时，通过.then指定的"是百度的"回调函数
return new Promise(function(){
fs.readFile(fpath,'utf8',(err,dataStr) => {
//如果读取失败，则调用"失败的回调函数"
//如果读取成功，则调用"成功的回调函数"
if(err)return reject(err)
resolve (dataStr)
})
})
}
//getFile方法的调用过程
getFile('./files/1.txt').then((r1) => {console.log}).catch(err => console.log(err.message))
什么是async/await
async/await 是ES8引入的新语法，用来简化Promise异步操作，在async/await 出现之前，开发者只能通过链式.then()方式处理Promise异步操作
thenFs.readFile('./files/1.txt','utf8')
.then(r1 => {
console.log(r1)
return thenFs.readFile('./files/2.txt','utf8')
})
.then(r2 => {
console.log(r2)
return thenFs.readFile('./files/3.txt','utf8')
})
.then(r3 => {
console.log(r3)
})
async/await的基本使用
import thenFs from 'then-fs'
async function getAllFile(){
const r1 = await thenFs.readFile('./files/1.txt','utf8')
console.log(r1)
const r2 = await thenFs.readFile('./files/2.txt','utf8')
console.log(r2)
const r3 = await thenFs.readFile('./files/3.txt','utf8')
console.log(r3)
}
getAllFile()
async/await的使用注意事项
- 如果在function中使用了await，则function必须被async修饰
- 在async方法中，第一个await之前的代码会同步执行，await之后的代码会异步执行
console.log('A')
async function getAllFile(){
consolelog('B')
const r1 = await thenFs.readFile('./files/1.txt','utf8')
const r2 = await thenFs.readFile('./files/2.txt','utf8')
const r3 = await thenFs.readFile('./files/3.txt','utf8')
console.log(r1,r2,r3)
consloe.log('D')
}
getAllFile()
console.log('C')
A
B
C
111 222 333
D
EventLoop
JavaSript 是一门单线程的编辑语言
单线程执行任务队列问题：
如果前一个任务非常耗时，则后续的任务就不得不一直等待，从而导致程序假死的问题
同步任务和异步任务
为了防止某个耗时任务当前熬制程序假死问题，JavaScript把待执行任务分为两类
同步任务
- 又叫非耗时任务，指的是在主线程排队对的任务
- 只有前一个任务执行完毕，才能执行后一个任务
异步任务
- 又叫耗时任务，异步任务有JavaScript委托给宿主环境进行执行
- 当异步任务执行完毕后，会通知JavaScript主线程执行异步任务的回调函数
同步任务和异步任务的执行过程
- 插入图片解释同步任务和异步任务
JavaScript主线程从"任务队列"中读取异步任务的回调函数，放到执行栈中一次执行，这个过程是循环不断的，所以整个的这种运行机制又称为EventLoop
import thenFs from 'then-fs'
console.log('A')
thenFs.readFile('./files/1.txt','utf8').then(dataStr => {
console.log('B')
})
setTimeout(() => {
console.log('C')
},0)
console.log('D')
A
D
C
B
A和D属于同步任务，会根据代码先后顺序执行
C和B属于异步任务，他们的回调函数会被加入到任务队列中，等待主线程空闲时再执行
宏任务和微任务
JavaScript 把异步任务有做了进步一划分，异步任务有分为两类，分别是
宏任务
- 异步Ajax请求
- setTimeout，setInterval
- 文件操作
- 其他宏任务
微任务
- Promise.then .catch .finally
- process.nextTick
- 其他任务
宏任务和微任务的执行顺序
每个宏任务执行完毕之后，都会检查是否存在待执行的微任务
如果有，则执行完所有微任务之后，再继续执行下一个宏任务
//宏任务
setTimeout(function(){
console.log('1')
})
//执行函数同步执行
new Promise(function(resolve){
console.log('2')
resolve()
//微任务
}).then(function(){
console.log('3')
})
//同步任务
console.log('4')
2431
分析：
先执行所有同步任务 24
再执行同步任务里面的微任务 3
最后执行宏任务 1
API接口案例
1.案例需求
基于MySQL数据库+Express对外提供用户列表的API接口服务
第三方包express和mysql
es6模块化
Promise
async/await
主要的实现步骤
搭建项目的基本结构
创建基本的服务器
创建db数据库操作模块
创建user_ctrl业务模块
创建user_router路由器模块
搭建项目的基本结构
启用ES6模块化支持
- 在package.json中声明“type”:“module”
安装第三方依赖包 - 运行npm install [email protected] [email protected]
创建基本的服务器
//使用ES6的默认导入语法
import express from 'express'
const app = express()
app.listen(80,() => {
console.log('server running at http://127.0.0.1')
})
创建db数据库操作模块
import mysql from 'mysql2'
const pool = mysql.createPool({
host:'127.0.0.1',
port:3306,
//操作数据库名称
database:'my_db_01',
//登录数据库到的用户名
user:'root',
//登录数据库密码
password:'admin123'
})
//默认导出一个支持Promise API的pool
export default pool.promise()
创建user_ctrl模块
import db from '../db/index.js'
//使用es6的按需导出语法导出 getAllUser方法
export async function getAllUser(req,res){
const [rows] = await db.query('select id,username,nickname from ev_users')
// console.log(rows)
res.send({
status:0,
message:'获取用户列表数据成功',
data: rows,
})
}
getAllUser()
创建user_router模块
import express from 'express'
//按需导入getAllUser方法
import {getAllUser} from '../controller/user-ctrl.js'
//创建路由实例对象
const router = new express.Router()
//调用router.get()方法，监听客户端get请求，当客户端请求'/user'地址，让getAllUser处理函数去处理
router.get('/user',getAllUser)
export default router
导入并挂载路由模块
import userRouter from './router/user_router.js'
app.user('/api',userRouter)
使用try…catch捕获异常
export async function(req,res){
//使用try...catch捕获Promise异步惹怒我中产生的异常错误，并在catch块中进行处理
try{
// ev_users表中没有xxx字段，所有此SQL 语句会执行异常
const [rows] = await db.query('selsct id,username,nickname,xxx from ev_users')
res.send({status:0,
message:'获取用户列表数据成功',
data:rows,
})
}catch(e){
res.send({status:1,
message:'获取用户列表失败！',
desc:e.message,
})
}
}
小节
能够知道如何使用ES6的模块化语法
- 默认导出与默认导入
- 按需导出与按需导入
能够知道如何使用Promise解决回调地狱问题
- promise.then()
- promise.catch()
讷讷够使用async/await简化Promise的调用
- 方法中用到await，则方法需要被async修饰
能够说出什么是EventLoop
- EventLoop示意图
能够说出宏任务和微任务的执行顺序
- 在执行下一个宏任务之前，先检查是否有带执行的微任务