****************************************************************************************************************************************************************************
0、ES6学习目标 【1】整体目标 ES6的模块化语法 ************************************************************ Promise解决回调地狱问题 ************************************************************ async...await简化Promise调用 ************************************************************ 什么是EventLoop ************************************************************ 宏任务和微任务的执行顺序
****************************************************************************************************************************************************************************
1、ES6模块化概念 【1】前端模块化分类。大一统ES6规范，使得学习与开发难度都降低了。 【2】浏览器与服务端通用的模块化开发规范。 ********************************************************************************* 每个js都是一个独立的模块 ********************************************************************************* 导入其他模块的成员，需要使用import关键字 ********************************************************************************* 向外共享成员，使用export关键字
****************************************************************************************************************************************************************************
2、在node.js中体验ES6模块化
【1】确保安装V14.15.1或更高的node.js版本
【2】在package.json的根节点中添加"type":"module"节点
【3】npm init -y
package.json
******************************************************************************
{
"type": "module",
"name": "day",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
****************************************************************************************************************************************************************************
3、默认导出导入
【1】3种用法
************************************************************默认导出
export default 默认导出的成员
let n1 = 10
let n2 = 20
function show() {
}
export default {
n1,
show
}
************************************************************默认导入
/*myImport.js*/
import n1 from './myExport.js'
console.log(n1)
****************************************************************************************************************************************************************************
4、默认导出导入的注意事项 【1】在每个模块中，只允许使用唯一一次export default。 【2】默认导入时，接收时候的成员名称可以任意命名，单需要合法。
****************************************************************************************************************************************************************************
5、按需导出导入
【1】导出
export let n1 = 10
export let n2 = 20
export function show() {
}
【2】导入
/*myImport.js*/
import {n1, n2, show} from './myExport.js'
console.log(n1)
console.log(n2)
****************************************************************************************************************************************************************************
6、按需导出导入的注意点 【1】按需导出每个模块中可以使用多次按需导出。 【2】按需导入的成员名称，必须和按需导出的名称一致。 【3】按需导入时，可以使用as关键字进行重命名。和数据库一样的操作... 【4】按需导出入可以和默认导出入一起使用
****************************************************************************************************************************************************************************
7、直接导入并执行模块中的代码
【1】myExport.js
for (let i = 0; i < 3; i++) {
console.log(i)
}
【2】myImport.js
/*myImport.js*/
import './myExport.js'
****************************************************************************************************************************************************************************
8、Promise与回调地狱问题解决
【1】回调地狱说明
setTimeout(() => { // 第1层
console.log('延时1秒后输出')
setTimeout(() => { // 第2层
console.log('延时2秒后输出')
setTimeout(() => { // 第3层
console.log('延时3秒后输出')
}, 3000)
}, 2000)
}, 1000)
【2】回调地狱的缺点：代码耦合性太强，难以维护。冗余代码多，可读性差。
【3】如何解决回调地狱？Promise
****************************************************************************************************************************************************************************
9、Promise的概念
【1】是一个构造函数，可以new Promise()
【2】Promise.prototype上包含一个.then()方法
【3】.then()方法可以预先指定成功和失败的回调函数
p.then(res=>{},err=>{})
********************************************************************
成功的回调函数是必选的，失败的是可选的。
****************************************************************************************************************************************************************************
10、基于回调函数按顺序读取文本Content
【1】一次读取1-3.txt
【2】安装then-fs包：npm i then-fs
*******************************************************************************
使用then-fs的readFile()方法，可以异步的读取文件内容，它的返回值是Promise实例对象
*******************************************************************************
import thenFs from 'then-fs'
/*下列代码无法保证读取顺序*/
thenFs.readFile('./1.txt', 'utf8').then(res => {
console.log(res)
}, err => {
console.log(err.message)
})
thenFs.readFile('./2.txt', 'utf8').then(res => {
console.log(res)
}, err => {
console.log(err.message)
})
thenFs.readFile('./3.txt', 'utf8').then(res => {
console.log(res)
}, err => {
console.log(err.message)
})
****************************************************************************************************************************************************************************
11、Promise按顺序读取
【1】升级10的代码，使用.then方法的链式调用
import thenFs from 'then-fs'
/*下列代码无法保证读取顺序*/
let promise = thenFs.readFile('./1.txt', 'utf8')
.then(res1 => {
console.log(res1)
return thenFs.readFile('./2.txt', 'utf8')
})
promise = promise.then(res2 => {
console.log(res2)
return thenFs.readFile('./3.txt', 'utf8')
})
promise.then(res3 => {
console.log(res3)
})
【2】继续升级
import thenFs from 'then-fs'
/*下列代码无法保证读取顺序*/
thenFs.readFile('./1.txt', 'utf8')
.then(res1 => {
console.log(res1)
return thenFs.readFile('./2.txt', 'utf8')
})
.then(res2 => {
console.log(res2)
return thenFs.readFile('./3.txt', 'utf8')
})
.then(res3 => {
console.log(res3)
})
【3】如果上一个.then返回了promise对象，我们可以继续通过.then来指定成功的回调函数，这样就解决了回调地狱的问题。
****************************************************************************************************************************************************************************
12、通过catch方法捕获错误...这不是就是java的语法吗
【1】在最后加catch打印，还挺好用的。
import thenFs from 'then-fs'
/*下列代码无法保证读取顺序*/
thenFs.readFile('./11.txt', 'utf8')
.then(res1 => {
console.log(res1)
return thenFs.readFile('./2.txt', 'utf8')
})
.then(res2 => {
console.log(res2)
return thenFs.readFile('./3.txt', 'utf8')
})
.then(res3 => {
console.log(res3)
})
.catch(err => {
console.log(err)
})
****************************************************************************************************************************************************************************
13、Promise的其他方法
【1】Promise.all() 等待机制
import thenFs from 'then-fs'
const promiseArray = [
thenFs.readFile('./1.txt', 'utf-8'),
thenFs.readFile('./2.txt', 'utf-8'),
thenFs.readFile('./3.txt', 'utf-8')
]
Promise.all(promiseArray)
.then(res => {
console.log(res)
})
Promise.all(promiseArray)
.then(([res1, res2, res3]) => {
console.log(res1, res2, res3)
}
)
【2】Promise.race()方法，赛跑机制，只要任何一个异步操作完成，立刻执行.then操作
import thenFs from 'then-fs'
const promiseArray = [
thenFs.readFile('./1.txt', 'utf-8'),
thenFs.readFile('./2.txt', 'utf-8'),
thenFs.readFile('./3.txt', 'utf-8')
]
Promise.race(promiseArray)
.then(res => {
console.log(res)
})
Promise.race(promiseArray)
.then(([res1, res2, res3]) => {
console.log(res1, res2, res3)
}
)
****************************************************************************************************************************************************************************
14、Promise封装读取文件的方法
【1】封装要求：方法名为getFile，方法形参接收一个fPath，返回值为Promise对象
import thenFs from 'then-fs'
function getFile(fPath) {
return thenFs.readFile(fPath, 'utf-8')
}
export default {
getFile
}
【2】使用这个方法
import getFile from './myExport.js'
getFile.getFile('./1.txt').then(res => {
console.log(res)
})
【3】升级，怎么还没有我写的好呀！！！！！！！！！！！！！！！
import thenFs from 'then-fs'
function getFile(fPath) {
return new Promise(function (resolve, reject) {
thenFs.readFile(fPath, 'utf-8', (err, str) => {
if (err) {
return reject(err)
} else {
return resolve(str)
}
})
})
}
export default {
getFile
}
【4】这个好，可以知道异常
import getFile from './myExport.js'
getFile.getFile('./11.txt').then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
****************************************************************************************************************************************************************************
16、async和await概念
【1】是es8引入的新语法，是用来简化Promise操作的
【2】.then解决了回调地狱，但是代码仍然冗余，不易理解。
【3】async与await推出了。简单多了感觉。
import thenFs from 'then-fs'
/*function getFile() {
let res = thenFs.readFile('./1.txt', 'utf-8')
console.log(res)
}*/
async function getFile() {
let res = await thenFs.readFile('./1.txt', 'utf-8')
console.log(res)
res = await thenFs.readFile('./2.txt', 'utf-8')
console.log(res)
res = await thenFs.readFile('./3.txt', 'utf-8')
console.log(res)
}
getFile()
****************************************************************************************************************************************************************************
17、async和await使用注意点
【1】如果在方法中使用了await，则function必须被async（异步）修饰
【2】执行顺序示例。第一个await之前都是同步的，第一个await之后的都是异步的。
import thenFs from 'then-fs'
/*function getFile() {
let res = thenFs.readFile('./1.txt', 'utf-8')
console.log(res)
}*/
console.log('A')
async function getFile() {
console.log('B')
let res = await thenFs.readFile('./1.txt', 'utf-8')
console.log(res)
res = await thenFs.readFile('./2.txt', 'utf-8')
console.log(res)
res = await thenFs.readFile('./3.txt', 'utf-8')
console.log(res)
console.log('D')
}
getFile()
console.log('C')
****************************************************************************************************************************************************************************
18、EventLoop同步任务与异步任务 【1】js是单线程的语言，只能同时执行一个任务 ***********************************************************************同步任务 是在主线程上排队执行的那些任务 ***********************************************************************异步任务 又叫做耗时任务，是由js委托给宿主环境进行执行的任务。当任务执行完毕后通知js主线程执行回调函数
****************************************************************************************************************************************************************************
19、同步、异步任务执行的过程 【1】堆。主线程是在栈里执行的。栈里的主任务js执行，栈里的异步任务委托给宿主环境执行。 宿主环境包含浏览器或者Node.js。执行完成的异步任务给‘任务队列’。主线程执行完毕后，js主线程 会主动查找‘任务队列’。按照回调函数的顺序取出来，再去执行。js主线程会不断的循环工作。 【2】栈是运行方法的、堆是存储实体的（比如数组）。栈内存没有默认值，堆内存有默认值。都是存在内存里的。new 对象是放在堆里的，它不会随方法而消失。
****************************************************************************************************************************************************************************
20、EventLoop的概念
【1】js主线程不断去任务队列取任务的整个循环过程，就叫做EventLoop
import thenFs from 'then-fs'
console.log('A')
thenFs.readFile('./1.txt', 'utf-8').then(res => {
console.log('B')
})
setTimeout(() => {
console.log('C')
}, 0)
console.log('D')
***********************************************************************打印为ADCB
因为B与C C先执行完毕。所以先打印C
****************************************************************************************************************************************************************************
21、宏任务与微任务概念 【1】异步任务分为宏、微任务。 宏任务：ajax setTimeout setInterval 文件操作 其他 微任务：Promise.then .catch .finally 其他 【2】宏、微任务执行顺序。两者是交替执行的 宏任务执行完毕，会判断是否存在微任务，如果有先执行微任务完毕后再执行宏任务。
****************************************************************************************************************************************************************************
22、理解宏任务与微任务的执行顺序 【1】小云、小腾排队，假设只有一个业务，小云办理，小腾仅能等待。 小云存款（宏任务开始）后，柜员询问是否需要办理信用卡、购买理财产品，如果办理则微任务开始。 小云完毕后，小腾办理。
****************************************************************************************************************************************************************************
25、API接口案例 【1】MySQL数据库+Express（我java不能实现吗？）... 【2】npm i express@4.17.1 mysql@2.2.5 【3】创建express服务器 【4】创建db数据库，就是properties的配置信息 【5】创建user_control模块，执行sql语句 【6】使用user_router模块 【7】使用try...catch捕获程序执行中的异常
****************************************************************************************************************************************************************************