# Vue(1)

1. ES6模块化
2. Promise
3. async / await
- 3.1 async/await的基本使用
- 3.2 async/await的使用注意事项
4. EventLoop

# 1. ES6模块化

# 1.1. 前端模块化规范的分类

在ES6模块化规范诞生之前， JavaScript社区已经尝试并提出了AMD、CMD、CommonJS等模块化规范。但是，这些由社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准，例如：

AMD和CMD适用于浏览器端的Javascript模块化
CommonJS 适用于服务器端的Javascript模块化

太多的模块化规范给开发者增加了学习的难度与开发的成本。因此，大一统的ES6模块化规范诞生了!

# 1.2. 什么是ES6模块化规范

ES6模块化规范是浏览器端与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需再额外学习AMD、CMD或CommonJS等模块化规范。

ES6模块化规范中定义:

每个js 文件都是一个独立的模块
导入其它模块成员使用import关键字
向外共享模块成员使用export关键字

# 1.3. 在node.js中体验ES6模块化

node.js中默认仅支持CommonJS模块化规范，若想基于node.js体验与学习ES6的模块化语法，可以按照如下两个步骤进行配置:

确保安装了v14.15.1或更高版本的node.js，
在package.json的根节点中添加"type": "module"节点

初始化

快速新建package.json文件: 在终端中输入npm init -y

# 1.4. ES6模块化的基本语法

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

# 1.4.1 默认导出与默认导入

# 1.4.1.1 默认导出

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

//定义模块私有成员n1
let n1=10
//定义模块私有成员n2 (外界访问不到n2，因为它没有被共享出去)
let n2 = 20 
//定义模块私有方法show
function show() {} 
//使用export default 默认导出语法，向外共享n1和show 两个成员
export default{ 
	n1,
	show
}

# 1.4.1.2 默认导入

语法: import 接收名称from '模块标识符'

//从01_ m1.js模块中导入export default 向外共享的成员
//并使用m1成员进行接收
import m1 from './01 m1.js'
//打印输出的结果为:
// { n1: 10，show: [Function: show] }
console.log(m1)

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

每个模块中，只允许使用唯一的一次export default，否则会报错!

# 1.4.2 按需导出与按需导入

# 1.4.2.1 按需导出

语法: export按需导出的成员

//当前模块为03_ m2.js
//向外按需导出变量s1
export let s1 = 'aaa' 
//向外按需导出变量s2
export let s2 = 'ccc'
//向外按需导出方法say
export function say() {}

export default {
  a: 20
}

# 1.4.2.2 按需导出

语法: import{ s1 } from '模块标识符'

//导入模块成员
import info, {s1，s2 as str2，say} from './03 m2.js'

console.log(s1) // 打印输出aaa
console.log(s2) // 打印输出ccc
console.log(say) //打印输出[Function: say]

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

每个模块中可以使用多次按需导出
按需导入的成员名称必须和按需导出的名称保持一致
按需导入时，可以使用as关键字进行重命名
按需导入可以和默认导入一起使用

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

如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此

时，可以直接导入并执行模块代码，示例代码如下:

//当前文件模块为05_ m3.js
//在当前模块中执行一个for 循环操作
for(leti=0;i<3;i++){
	console.log(i)
}

// -------------------分割线---------------------

//直接导入并执行模块代码，不需要得到模块向外共享的成员
import './05_ m3.js'

# 2. Promise

# 2.1 回调地狱

多层回调函数的相互嵌套，就形成了回调地狱。

setTimeout(() => { //第1层回调函数
	console.log( '延时1秒后输出')
	setTimeout(() => { //第2层回调函数
		console.log( '再延时2秒后输出')
		setTimeout(() => { //第3层回调函数
			console.log('再延时3秒后输出')
		}，3000)
	}，2000)
}，1000)

回调地狱的缺点

代码耦合性太强，牵一发而动全身，难以维护
大量冗余的代码相互嵌套，代码的可读性变差

# 2.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()方法时，成功的回调函数是必选的、失败的回调函数是可选的

# 2.3 then-fs的基本使用

调用then-fs提供的readFile()方法，可以异步地读取文件的内容，它的返回值是

Promise的实例对象。因此可以调用.then() 方法为每个Promise异步操作指定成

功和失败之后的回调函数。示例代码如下:

// 基于Promise 的方式读取文件
import thenFs from 'then-fs'
//注意: .then()中的失败回调是可选的，可以被省略
thenFs.readFile('./files/1.txt'，'utf8').then(r1 => { console.log(r1) }，err1 => { console.log(err1.message) })
7 thenFs.readFile('./files/2.txt'，'utf8').then(r2 => { console.log(r2) }，err2 => { console.log(err2.message) })
8 thenFs.readFile('./files/3.txt'，'utf8'). then(r3 => { console.log(r3) }，err3 => { console.log(err3.message) })

# 2.4 基于Promise按顺序读取文件的内容

Promise支持链式调用从而来解决回调地狱的问题。示例代码如下:

// 1.返回值是Promise的实例对象
thenFs.readFile('./files/1.txt'，'utf8') 
	// 2.通过.then 为第一个Promise 实例指定成功之后的回调函数
	.then((r1) => { 
		console.log(r1)
		// 3.在第一个.then 中返回一个新的Promise 实例对象
		return thenFs. readFile('./files/2.txt'，'utf8') 
})
	// 4.继续调用.then，为上一个.then的返回值(新的Promise 实例)指定成功之后的回调函数
	.then((r2) => {
		console.1og(r2)
  	// 5.在第二个.then 中再返回一个新的Promise 实例对象
		return thenFs. readFile(' ./files/3.txt'，'utf8') 
})
	// 6.继续调用.then，为上一个.then 的返回值(新的Promise 实例)指定成功之后的回调函数
	.then((r3) => { 
	console.log(r3)
})

# 2.5 通过.catch捕获错误

在Promise的链式操作中如果发生了错误，可以使用Promise.prototype**.catch**方法进

行捕获和处理:

thenFs.readFile('./files/11.txt'，'utf8') 
.then(r1 => {...})
.catch(err => {
  console.log(err.message)
})

# 2.6 Promise.all()方法

Promise.all()方法会发起并行的Promise异步操作，等所有的异步操作全部结束后才会

执行下一步的.then操作( 等待机制)。示例代码如下:

// 1.定义一个数组，存放3个读文件的异步操作
const promiseArr = [
	thenFs.readFile('./files/11.txt'，'utf8'),
	thenFs.readFile('./files/2.txt'，'utf8'),
	thenFs.readFile('./files/3.txt'，'utf8'),
]
// 2.将Promise 的数组，作为Promise.all() 的参数
Promise . all(promiseArr )
	//2.1所有文件读取成功(等待机制)
	.then(([r1,r2,r3])=>{
	console.log(r1，r2，r3)
}
// 2.2捕获Promise 异步操作中的错误
.catch(err => { 
	console.log(err.message)
})

注意

数组中Promise实例的顺序，就是最终结果的顺序!

# 3. async / await

# 3.1 async/await的基本使用

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

import thenFs from 'then-fs'
// 按照顺序读取文件1，2，3的内容
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()

# 3.2 async/await的使用注意事项

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

# 4. EventLoop

# 4.1 同步任务和异步任务

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

同步任务(synchronous)
- 又叫做非耗时任务，指的是在主线程.上排队执行的那些任务
- 只有前一个任务执行完毕,才能执行后一个任务
异步任务( asynchronous )
- 又叫做耗时任务，异步任务由JavaScript委托给宿主环境进行执行
- 当异步任务执行完成后，会通知JavaScript主线程执行异步任务的回调函数

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

同步任务由JavaScript主线程次序执行
异步任务委托给宿主环境执行
已完成的异步任务对应的回调函数，会被加入到任务队列中等待执行
JavaScript 主线程的执行栈被清空后，会读取任务队列中的回调函数，次序执行
JavaScript 主线程不断重复上面的第4步

# 4.3 EventLoop的基本概念

JavaScript主线程从“任务队列”中读取异步任务的回调函数,放到执行栈中依次执行。

这个过程是循环不断的，所以整个的这种运行机制又称为EventLoop ( 事件循环)。

# 4.4 宏任务与微任务

# 4.4.1 什么是宏任务和微任务

JavaScript把异步任务又做了进一步的划分，异步任务又分为两类,分别是:

宏任务(macrotask)
- 异步 Ajax请求
- setTimeout、 setInterval
- 文件操作
- 其它宏任务
微任务(microtask)
- Promise.then、 .catch 和.finally
- process.nextTick
- 其它微任务

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

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

任务之后，再继续执行下一个宏任务。

← 前端笔记