ES6学习

1.Node.js通过babel体验ES6模块化

(1) cnpm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node
(2) cnpm install --save @babel/polyfill
(3) 项目根目录创建文件babel.config.js
(4) babel.config.js 文件内容

const presets=[
        [
            "babel/evn",
            {
                targets:{
                    edge:"17",
                    firefox:"60",
                    chrom:"67",
                    safair:"11.1"
                }
            }
        ]
    ]
    module.exports={presets}

(5) 通过 npx babel-node .\index.js 执行代码
报错的解决办法参照 https://blog.csdn.net/u010086122/article/details/115057049

2.ES6模块化的基本语法

（1）.默认导入导出
默认导出语法 export default 默认导出的成员

//每个模块中，只允许使用唯一的一次 export default
let n1=10
export default { n1 }

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

//默认导入时的接收名称可以任意名称，合法即可
   import m1 from '../m1.js'

（2）.按需导入导出
按需导入的成员名称必须和按需导出的名称保持一致
按需导入时，可以使用 as 关键字进行重命名

//按需导出
export let s1=10
export function say(){}
//按需导入
//import {s1} from '模块标识符'
import {s1,say} from '../m1.js'

（3）.直接导入并运行

//import '模块标识符'
import '../m1.js'

3.Promise

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

npm i then-fs

基于 then-fs 读取文件内容

.then 链式调用的优点：
解决了回调地狱的问题
.then 链式调用的缺点：
代码冗余、阅读性差、不易理解async/await

then-fs 的基本使用
调用 then-fs 提供的 readFile() 方法，可以异步地读取文件的内容，它的返回值是 Promise 的实例对象。因此可以调用 .then() 方法为每个 Promise 异步操作指定成功和失败之后的回调函数
如果上一个 .then() 方法中返回了一个新的 Promise 实例对象，则可以通过下一个 .then() 继续进行处理。通过 .then() 方法的链式调用，就解决了回调地狱的问题。

//基于Promise异步按顺序读取文件内容
import thenFs from 'then-fs'
//在 Promise 的链式操作中如果发生了错误，可以使用 Promise.prototype.catch 方法进行捕获和处理
//如果不希望前面的错误导致后续的 .then 无法正常执行，则可以将 .catch 的调用提前
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.race() 方法

 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() 方法会发起并行的 Promise 异步操作，等所有的异步操作全部结束后才会执行下一步的 .then 操作（等待机制）
Promise.all(promiseArr).then(([result1,result2,result3]) => {
  console.log(result1,result2,result3)
}).catch((err) => {
  console.log(err.message)
})

//Promise.race() 方法会发起并行的 Promise 异步操作，只要任何一个异步操作完成，就立即执行下一步的.then 操作（赛跑机制）
Promise.race(promiseArr).then(result => {
  console.log(result)
}).catch((err) => {
  console.log(err.message)
})

基于 Promise 封装读文件的方法

import fs from 'fs'

function getFile(fpath) {
  return new Promise(function (resolve, reject) {
  //resolve形参是:调用getFiles()方法时，通过 .then 指定的“成功的“回调函数
  //reject形参是:调用getFiles()方法时，通过.then指定的“失败的"回调函数
    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))

4.async/await

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

//如果在 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')
  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 C r1 r2 r3 D

5.EventLoop

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

//结合 EventLoop 分析输出的顺序
import thenFs from 'then-fs'

console.log('A')
thenFs.readFile('./files/3.txt', 'utf8').them(dataStr=>{
	console.log('B')
})
setTimeout(()=>{
	console.log('C')
},0)
console.log('D')



//正确的输出结果：ADCB。其中：
//A 和 D 属于同步任务。会根据代码的先后顺序依次被执行
//C 和 B 属于异步任务。它们的回调函数会被加入到任务队列中，等待主线程空闲时再执行，而C只延时了0s,所以C先出来进入队列

6.宏任务和微任务

JavaScript 把异步任务又做了进一步的划分，异步任务又分为两类，分别是：
① 宏任务（macrotask）
⚫ 异步 Ajax 请求、
⚫ setTimeout、setInterval、
⚫ 文件操作
⚫ 其它宏任务
② 微任务（microtask）
⚫ 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
//分析：
//① 先执行所有的同步任务:执行第 6 行、第 12 行代码
//② 再执行微任务:执行第 9 行代码
//③ 再执行下一个宏任务:执行第 2 行代码

7.API 接口案例

1.初始化：
打开终端 执行npm init -y
2.启用 ES6 模块化支持:
在 package.json 中声明 "type": "module"
3.安装第三方依赖包:
运行 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('server running at http://127.0.0.1')
})

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: 'admin123',//数据库的密码
})
//默认导出一个支持Promise API 的pool
export default pool.promise()

6. 创建 user_ctrl 模块

//controller文件夹下创建user_ctrl.js文件
import db from '../db/index.js'

// 使用 ES6 的按需导出语法，将 getAllUser 方法导出出去
export async function getAllUser(req, res) {
    const [rows] = await db.query('select id, username, nickname, xxx from ev_users')
    res.send({
      status: 0,
      message: '获取用户列表数据成功！',
      data: rows,
    })
}

7. 创建 user_router 模块

//router文件夹下创建user_router.js文件
import express from 'express'
//从user_ctrl.js模块中按需导入getAllUser函数
import { getAllUser } from '../controller/user_ctrl.js'
//创建路由对象
const router = new express.Router()
//挂载路由规则
router.get('/user', getAllUser)
// 使用 ES6 的按需导出语法，将 路由对象共享出去
export default router

8. 导入并挂载路由模块

//app.js中
import express from 'express'
//使用默认导入语法，导入路由对象
import userRouter from './router/user_router.js'
const app = express()
//挂载用户路由模块
app.use('/api', userRouter)

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

9. 使用 try…catch 捕获异常

import db from ‘…/db/index.js’

// 使用 ES6 的按需导出语法，将 getAllUser 方法导出出去

//user_ctrl 模块中
export async function getAllUser(req, res) {
  try {
    const [rows] = await db.query('select id, username, nickname, xxx from ev_users')
    res.send({
      status: 0,
      message: '获取用户列表数据成功！',
      data: rows,
    })
  } catch (err) {
    res.send({
      status: 1,
      message: '获取用户列表数据失败！',
      desc: err.message,
    })
  }
}

最后的目录结构