目录
ES6 模块化
1、什么是 ES6 模块化规范
ES6 模块化规范
是
浏览器端
与
服务器端
通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学 习成本，开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。
ES6 模块化规范中定义：
- 每个 js 文件都是一个独立的模块
- 导入其它模块成员使用 import 关键字
- 向外共享模块成员使用 export 关键字
2、在 node.js 中体验 ES6 模块化
node.js 中
默认仅支持 CommonJS 模块化规范
，若想基于 node.js 体验与学习 ES6 的模块化语法，可以按照
如下两个步骤进行配置：
① 确保安装了
v14.15.1
或更高版本的 node.js
② 在 package.json 的根节点中添加
"type": "module"
节点
3、ES6 模块化的基本语法
ES6 的模块化主要包含如下 3 种用法：
- 默认导出与默认导入
- 按需导出与按需导入
- 直接导入并执行模块中的代码
默认导出的语法：
export default
默认导出的成员
默认导入的语法：
import
接收名称
from
'
模块标识符
'
每个模块中，
只允许使用唯一的一次
export default，否则会报错！
默认导入时的
接收名称
可以任意名称，
只要是合法的成员名称即可
：
按需导出的语法：
export
按需导出的成员
按需导入的语法：
import
{
s1
}
from
'模块标识符'
Promise
1. 回调地狱
多层回调函数的相互嵌套
，就形成了
回调地狱
。
为了解决回调地狱的问题，
ES6
（ECMAScript 2015）中新增了
Promise
的概念。
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() 方法时，成功的回调函数是必选的、失败的回调函数是可选的
3、基于回调函数按顺序读取文件内容
4.、基于 then-fs 读取文件内容
由于 node.js 官方提供的 fs 模块
仅支持
以
回调函数的方式
读取文件，
不支持 Promise 的调用方式
。因此，需 要先运行如下的命令，安装
then-fs
这个第三方包，从而支持我们基于 Promise 的方式读取文件的内容：
npm i then-fs4.1 then-fs 的基本使用
调用 then-fs 提供的
readFile()
方法，可以异步地读取文件的内容，
它的返回值是 Promise 的实例对象
。因 此可以
调用 .then() 方法
为每个 Promise 异步操作指定
成功
和
失败
之后的回调函数。
//通过默认导入
import thenFs from 'then-fs'
注意：上述的代码
无法保证文件的读取顺序
，需要做进一步的改进！
4.2 .then() 方法的特性
如果上一个 .then() 方法中
返回了一个新的 Promise 实例对象
，则可以通过下一个 .then() 继续进行处理。通 过 .then() 方法的
链式调用
，就解决了回调地狱的问题。
4.3 基于 Promise 按顺序读取文件的内容
Promise 支持链式调用
，从而来解决回调地狱的问题。示例代码如下：
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)
})
4.4 通过 .catch 捕获错误
.catch((err) => {
console.log(err.message)
})
如果不希望前面的错误导致后续的 .then 无法正常执行，则
可以将 .catch 的调用提前
4.5 Promise.all() 方法
Promise.all() 方法会发起并行的 Promise 异步操作，等
所有的异步操作全部结束后
才会执行下一步的 .then 操作（等待机制）。示例代码如下
import thenFs from 'then-fs'
const promiseArr = [
thenFs.readFile('./files/3.txt', 'utf8'),
thenFs.readFile('./files/2.txt', 'utf8'),
thenFs.readFile('./files/1.txt', 'utf8'),
]
Promise.all(promiseArr).then(result => {
console.log(result)
})4.6 Promise.race() 方法
Promise.race() 方法会发起并行的 Promise 异步操作，
只要任何一个异步操作完成，就立即执行下一步的 .then 操作
（赛跑机制）。示例代码如下：
Promise.race(promiseArr).then(result => {
console.log(result)
})5. 基于 Promise 封装读文件的方法
方法的封装要求：
①
方法的名称要定义为
getFile
②
方法接收一个
形参 fpath
，表示要读取的文件的路径
③
方法的
返回值
为 Promise 实例对象
1 getFile 方法的基本定义
function getFile(fpath) {
return new Promise
}2 创建具体的异步操作
如果想要创建
具体的异步操作
，则需要在 new Promise() 构造函数期间，
传递一个 function 函数
，
将具体的 异步操作定义到 function 函数内部
function getFile(fpath) {
return new Promise(function () {
fs.readFile(fpath, 'utf8', (err, dataStr) => {
})
})
}3 获取 .then 的两个实参
通过 .then() 指定的成功和失败的回调函数，可以在 function 的形参中进行接收，
4 调用 resolve 和 reject 回调函数
Promise 异步操作的结果，可以调用 resolve 或 reject 回调函数进行处理。
import fs from 'fs'
function getFile(fpath) {
return new Promise(function (resolve, reject) {
fs.readFile(fpath, 'utf8', (err, dataStr) => {
if (err) return reject(err)
resolve(dataStr)
})
})
}
getFile('./files/11.txt')
.then((r1) => {
console.log(r1)
})
.catch((err) => console.log(err.message))
async/await
1. 什么是 async/await
async/await
是
ES8
（ECMAScript 2017）引入的新语法，用来
简化 Promise 异步操作
。在 async/await 出现之前，开发者只能通过
链式 .then() 的方式
处理 Promise 异步操作。
2. async/await 的基本使用
import thenFs from 'then-fs'
async function getAllFile() {
const r1 = await thenFs.readFile('./files/1.txt', 'utf8')
console.log(r1)
}
getAllFile()
3. async/await 的使用注意事项
- 如果在 function 中使用了 await，则 function 必须被 async 修饰
- 在 async 方法中，第一个 await 之前的代码会同步执行，await 之后的代码会异步执行
console.log('A') async function getAllFile() { console.log('B') 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) console.log('D') } getAllFile() console.log('C') //输出 结果 A B 111、、 D
EventLoop
1. JavaScript 是单线程的语言
JavaScript 是一门单线程执行的编程语言。也就是说，同一时间只能做一件事情。
单线程执行任务队列的问题：
如果
前一个任务非常耗时
，则后续的任务就不得不一直等待，从而导致
程序假死
的问题。
2. 同步任务和异步任务
为了防止某个
耗时任务
导致
程序假死
的问题，JavaScript 把待执行的任务分为了两类：
①
同步任务
（synchronous）
- 又叫做非耗时任务，指的是在主线程上排队执行的那些任务
- 只有前一个任务执行完毕，才能执行后一个任务
②
异步任务（asynchronous）
- 又叫做耗时任务，异步任务由 JavaScript 委托给宿主环境进行执行
- 当异步任务执行完成后，会通知 JavaScript 主线程执行异步任务的回调函数
3. 同步任务和异步任务的执行过程
- 同步任务由 JavaScript 主线程次序执行
- 异步任务委托给宿主环境执行
- 已完成的异步任务对应的回调函数，会被 加入到任务队列中等待执行
- JavaScript 主线程的执行栈被清空后，会 读取任务队列中的回调函数，次序执行
- JavaScript 主线程不断重复上面的第 4 步
4. EventLoop 的基本概念
JavaScript 主线程从“任务队列”中读取异步 任务的回调函数，放到执行栈中依次执行
。这 个过程是循环不断的，所以整个的这种运行机 制又称为
EventLoop
（事件循环）。
５. 结合 EventLoop 分析输出的顺序
同步任务。会根据代码的先后顺序依次被执行
异步任务
。它们的回调函数会被加入到任务队列中，等待主线程空闲时再执行
宏任务和微任务
1. 什么是宏任务和微任务
JavaScript 把异步任务又做了进一步的划分，异步任务又分为两类，分别是：
① 宏任务
（macrotask）
- 异步 Ajax 请求、
- setTimeout、setInterval、
- 文件操作
- 其它宏任务
② 微任务
（microtask）
- Promise.then、.catch 和 .finally
- process.nextTick
- 其它微任务
2. 宏任务和微任务的执行顺序
每一个宏任务执行完之后，都会检查
是否存在待执行的微任务
， 如果有，则执行完所有微任务之后，再继续执行下一个宏任务。
API 接口案例
1. 案例需求
基于
MySQL 数据库 + Express
对外提供
用户列表
的 API 接口服务。用到的技术点如下：
- 第三方包 express 和 mysql2
- ES6 模块化
- Promise
- async/await
2. 主要的实现步骤
- 搭建项目的基本结构
- 创建基本的服务器
- 创建 db 数据库操作模块
- 创建 user_ctrl 业务模块
- 创建 user_router 路由模块
3. 搭建项目的基本结构
创建一个文件目录 用vscode打开
初始包 npm init -y
① 启用 ES6 模块化支持
- 在 package.json 中声明 "type": "module"
② 安装第三方依赖包
- 运行 npm install express@4.17.1 mysql2@2.2.5
4. 创建基本的服务器
新建app.js
import express from 'express'
const app = express()
app.listen(80, () =>{
console.log('serve run 127.0.0.1')
})运行 nodemon app.js
5. 创建 db 数据库操作模块
新建 db/index.js
数据库中必须有数据
import mysql from 'mysql2'
const pool = mysql.createPool({
host: '127.0.0.1',
port: '3306',
database: 'test',
user: 'root',
password: '123456',
})
export default pool.promise()
6. 创建 user_ctrl 模块
新建 user_ctrl.js 运行 ：node user_ctrl.js
import db from '../db/index.js'
export async function getAllUser(req, res){
const [rows] = await db.query('select id, username, password from user' )
console.log(rows)
res.send({
status: 0,
message: '获取用户成功',
data: rows,
})
}
7. 创建 user_router 模块
新建route /user_router.js
import express from 'express'
import { getAllUser } from '../controller/user_ctrl.js'
const router = new express.Router()
router.get('/user', getAllUser)
export default router
8. 导入并挂载路由模块
import express from 'express'
import userRouter from './router/user_router.js'
const app = express()
app.use('/api', userRouter)
app.listen(80, () =>{
console.log('serve run 127.0.0.1')
})9. 使用 try…catch 捕获异常
import db from '../db/index.js'
export async function getAllUser(req, res){
try {
const [rows] = await db.query('select id, username, password from user' )
console.log(rows)
res.send({
status: 0,
message: '获取用户成功',
data: rows,
})
}catch(err){
res.send({
status: 1,
message: '获取用户失败',
desc: err.message,
})
}
}
运行 ：nodemon app.js
1441
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
