ES6模块化开发

ES6模块化

ES6模块化规范是 浏览器端与 服务器端通用的模块化开发规范。

ES6模块化规范中定义：

• 每个js文件都是一个独立的模块

• 导入其它模块成员使用import关键字

• 向外共享模块成员使用export关键字

ES6的模块化主要包含如下3种用法：

• 默认导出与默认导入

• 按需导出与按需导入

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

默认导出
默认导出的语法：export default 默认导出的成员

let n1=10
let n2=20
function show(){}

export default{
    n1,
    show
}

默认导入
默认导入的语法：import 接收名称 from ‘模块标识符’

import m1 from './01_m1.js'
console.log(m1)

注意事项：每个模块中，只允许使用唯一的一次 export default，否则会报错！

注意事项：默认导入时的接收名称=可以任意名称，只要是合法的成员名称即可

// m1 是合法的名字
import m1 from './01_m1.js'
// 123m 不是合法的名字，不能以数字开头
import 123m from './01_m1.js'

按需导出
按需导出的语法：export按需导出的成员

export let s1='aaa'
export let s2='bbb'
export function say(){}

按需导入的语法：import {s1} from ‘模块标识符’

import {s1,s2,say} from './03_m1.js'

console.log(s1)
console.log(s2)
console.log(say)

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

• 每个模块中可以使用多次按需导出

• 按需导入的成员名称必须和按需导出的名称保持一致

• 按需导入时，可以使用as关键字进行重命名

• 按需导入可以和默认导入一起使用

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

// 当前文件模块为 05_m3.js
for (let i=0;i<3;i++){
    console.log)(i)
}
// 直接导入并执行模块中的代码
import '05_m3.js'

Promise

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

  setTimeout(() => {
        //第一层回调函数
        console.log("延时 1 秒后输出");

        setTimeout(() => {
          //第二层回调函数
          console.log("延时 2 秒后输出");

          setTimeout(() => {
            //第三层回调函数
            console.log("延时 3 秒后输出");
          }, 3000);
        }, 2000);
      }, 1000);

回调地狱的缺点：

• 代码耦合性太强，牵一发而动全身，难以维护

• 大量冗余的代码相互嵌套，代码的可读性变差

为了解决回调地狱的问题，ES6（ECMAScript 2015）中新增了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() 方法时，成功的回调函数是必选的、失败的回调函数是可选的

基于 then-fs 读取文件内容

由于 node.js 官方提供的 fs 模块仅支持以回调函数的方式读取文件，不支持 Promise 的调用方式。因此，需要先运行如下的命令，安装then-fs这个第三方包，从而支持我们基于 Promise 的方式读取文件的内容：

npm install then-fs

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

const thenFs = require("then-fs");
// node.js 不支持import等es6语法
// import thenFs from "then-fs";

thenFs.readFile('./files/1.txt','utf8').then(r1=>{console.log(r1)},err1=>{console.log(err1.message)})
thenFs.readFile('./files/2.txt','utf8').then(r2=>{console.log(r2)},err2=>{console.log(err2.message)})
thenFs.readFile('./files/3.txt','utf8').then(r3=>{console.log(r3)},err3=>{console.log(err3.message)})

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

如果过node.js 不支持import等es6语法

.js后缀改为.mjs运行以下命令

 node --experimental-modules app.mjs

.then() 方法的特性

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

基于 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);
  });

通过 .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);
  });

// ENOENT: no such file or directory, open 'C:\Users\易名\Desktop\Markdown\vue2-vue3\ES6模块化\MKH\files\11.txt'

如果不希望前面的错误导致后续的 .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);
  });


/*
undefined
222
333
*

Promise.all() 方法

Promise.all()方法会发起并行的 Promise 异步操作，等所有的异步操作全部结束后才会执行下一步的.then操作（等待机制）

import thenFs from "then-fs";

// 定义一个数组，存放 3 个读文件的异步操作
const promiseArr = [
  thenFs.readFile("./files/11.txt", "utf8"),
  thenFs.readFile("./files/2.txt", "utf8"),
  thenFs.readFile("./files/3.txt", "utf8"),
];
// 将Promise的数组，作为Promise.all()的参数
Promise.all(promiseArr)
  .then(([r1, r2, r3]) => {
    console.log(r1, r2, r3);
  })
  .catch((err) => {
    console.log(err.message);
  });

Promise.race() 方法

Promise.race()方法会发起并行的 Promise 异步操作，只要任何一个异步操作完成，就立即执行下一步的
.then操作（赛跑机制）。

import thenFs from "then-fs";

// 定义一个数组，存放 3 个读文件的异步操作
const promiseArr = [
  thenFs.readFile("./files/1.txt", "utf8"),
  thenFs.readFile("./files/2.txt", "utf8"),
  thenFs.readFile("./files/3.txt", "utf8"),
];
// 将Promise的数组，作为Promise.race()的参数
Promise.race(promiseArr)
  .then((result) => {
    console.log(result);
  })
  .catch((err) => {
    console.log(err.message);
  });
// 随机

基于 Promise 封装读文件的方法

方法的封装要求：

• 方法的名称要定义为getFile

• 方法接收一个形参fpath，表示要读取的文件的路径

• 方法的返回值为Promise 实例对象

getFile方法的基本定义

function getFile(fpath) {
    //方法的返回值为Promise 实例对象
  return new Promise();
}

new Promise()只是创建了一个形式上的异步操作

创建具体的异步操作

如果想要创建具体的异步操作，则需要在 new Promise()构造函数期间，传递一个function 函数，将具体的异步操作定义到 function 函数内部。

function getFile(fpath) {
  return new Promise(function () {
    fs.readFile(fpath, "utf8", (err, dataStr) => {});
  });
}

获取 .then 的两个实参
通过.then()指定的成功和失败的回调函数，可以在 function 的形参中进行接收

调用resolve和reject回调函数
Promise 异步操作的结果，可以调用 resolve 或 reject 回调函数进行处理

import fs from "fs";

function getFile(fpath) {
  //resolve成功的回调函数, reject失败的回调函数;
  return new Promise(function (resolve, reject) {
    fs.readFile(fpath, "utf8", (err, dataStr) => {
      if (err) return reject(err);
      resolve(dataStr);
    });
  });
}

getFile("./files/1.txt").then((r1)=>{console.log(r1)},(err)=>{console.log(err.message)});

async/await

async/await 是ES8（ECMAScript 2017）引入的新语法，用来简化 Promise异步操作。在async/await出现之前，开发者只能通过链式 .then() 的方式处理 Promise 异步操作。

使用async/await 简化 Promise 异步操作的示例代码如下：

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();

/*
111
222
333
*/

async/await的使用注意事项
① 如果在 function 中使用了 await，则 function必须被async修饰
② 在 async 方法中，第一个 await 之前的代码会同步执行，await 之后的代码会异步执行

import thenFs from "then-fs";

console.log("A");
async function getAllFile() {

  console.log("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);
  console.log("D");
}

getAllFile();
console.log("C");


/*
A
B
C
111
222
333
D
*/

EventLoop

同步任务和异步任务

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

• 同步任务（synchronous）

  • 又叫做非耗时任务，指的是在主线程上排队执行的那些任务

  • 只有前一个任务执行完毕，才能执行后一个任务

• 异步任务（asynchronous）

  • 又叫做耗时任务，异步任务由JavaScript委托给宿主环境进行执行

  • 当异步任务执行完成后，会通知 JavaScript 主线程执行异步任务的回调函数

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

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

结合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");

正确的输出结果：ADCB。其中：

• A 和D属于同步任务。会根据代码的先后顺序依次被执行

• C 和 B 属于异步任务。它们的回函数会被加入到任务队列中，等待主线程空闲时再执行

宏任务和微任务

JavaScript 把异步任务又做了进一步的划分，异步任务又分为两类，分别是：
宏任务（macrotask）

• 异步 Ajax 请求、

• setTimeout、setInterval、

• 文件操作

• 其它宏任务

微任务（microtask）

• Promise.then、.catch 和 .finally

• process.nextTick

• 其它微任务
  

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

每一个宏任务执行完之后，都会检查是否存在待执行的微任务，如果有，则执行完所有微任务之后，再继续执行下一个宏任务。

经典面试题1（先执行同步任务，再执行微任务，再执行下一个执行宏任务）

// 宏任务
setTimeout(() => {
  console.log("1");
});

// 同步任务
new Promise(function (resolve) {
  console.log("2");
  resolve();
  // 微任务
}).then(() => {
  console.log("3");
});
// 同步任务
console.log("4");

//2431

API接口案例

案例需求

基于 MySQL数据库 + Express 对外提供用户列表的 API 接口服务。用到的技术点如下：

• 第三方包express 和 mysql2

• ES6模块化

• Promise

• async/await

主要的实现步骤

• 搭建项目的基本结构

• 创建基本的服务器

• 创建db数据库操作模块

• 创建user_ctrl业务模块

• 创建user_router路由模块

搭建项目的基本结构
启用 ES6 模块化支持

• 在 package.json 中声明"type": “module”

安装第三方依赖包

• 运行 npm install express@4.17.1 mysql2@2.2.5

创建基本的服务器

import express from "express";

const app=express()

app.listen(80,()=>{
    console.log("server running at http://127.0.0.1")
})

创建db数据库操作模块

// 1. 导入 mysql 模块
import mysql from "mysql2";

// 2. 建立与 MySQL 数据库的连接关系
const pool = mysql.createPool({
  host: "127.0.0.1", // 数据库的 IP 地址
  port:3306,
  user: "root", // 登录数据库的账号
  password: "asd123456", // 登录数据库的密码
  database: "my_db_01", // 指定要操作哪个数据库
});


// 默认导出一个支持Promise API 的 pool
export default pool.promise()

创建user_ctrl业务模块

import db from "../index.js";

// 获取用户的列表数据

export async function getAllUser(req, res) {
  // db.query() 函数的返回值是Promise的实例对象，可以使用 async/wait 进行简化
  const [rows] = await db.query("select id,username,nickname from ev_users");
  res.send({
    status: 0,
    message: "获取用户列表数据成功",
    data: rows,
  });
}

创建user_router路由模块

import express from "express";

import { getAllUser } from "../controller/user_ctrl";

// 创建路由对象
const router =new express.Router()

// 挂载路由规则
router.get('/user',getAllUser)


export default router

导入并挂载路由模块

import express from "express";

import userRouter from './router/user_router'

const app=express()

// 挂载用户路由模块
app.use('/api',userRouter)


app.listen(80,()=>{
    console.log("server running at http://127.0.0.1")
})

使用try…catch捕获异常

export async function getAllUser(req, res) {
  try {
      // ev_users 表中没有 XXX 字段 ,所以此 SQL 语句会执行异常
    const [rows] = await db.query("select id,username,nickname,xxx from ev_users");
    res.send({ status: 0, message: "获取用户列表数据成功", data: rows });
  } catch (e) {
    res.send({ status: 1, message: "获取用户列表数据失败！", desc:e.m });
  }
}

/127.0.0.1")
})

**使用try...catch捕获异常**

```js
export async function getAllUser(req, res) {
  try {
      // ev_users 表中没有 XXX 字段 ,所以此 SQL 语句会执行异常
    const [rows] = await db.query("select id,username,nickname,xxx from ev_users");
    res.send({ status: 0, message: "获取用户列表数据成功", data: rows });
  } catch (e) {
    res.send({ status: 1, message: "获取用户列表数据失败！", desc:e.m });
  }
}