ES6模块化与异步编程

1、ES6模块化规范

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

2、Node使用ES6模块化

（1）node.js版本要高于v14.15.1

（2）在package.json中根节点加上"type": "module"

3、默认导出导入

（1）默认导出（只能使用一次export default）

// export default = {要导出的内容}
let a = 10
let b = 20
function show() {}
export default = {
  a,
  show
}

（2）默认导入（变量名要符合规范）

// import 模块名 from 导入的模块
import m1 from './默认导出.js'

4、按需导出导入

（1）按需导出

export let a = 'hello '
export let b = 'world'
let c = 'kitty'
export function say(a, b) {
  console.log(a + b)
}

（2）按需导入

import { a, b, say } from './按需导出.js'

（3）注意事项

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

按需导入必须与按需导出的变量名称一致

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

可以使用as给按需导入的变量重命名，重命名后必须是用新名称

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

如果只想运行某个模块中的代码，不想得到其中导出的内容，可以直接运行

import '要导入的文件'

不管是按需导入，还是默认导入，只要导入模块，其中的代码都会自动执行

6、Promise（ES6新增对象）

（1）回调地狱：多层回调函数相互嵌套（代码的耦合性太强，难以维护；大量冗余代码嵌套，阅读性差）

（2）Promise

Promise是一个构造函数，new出来的Promise实例对象代表一个一步操作：const p = new Promise()
Promise.prototype上包含一个.then()方法，可以通过原型链的方式访问到

.then()方法用来预先制定成功和失败的回调函数

// p.then(成功的回调, 失败的回调)
// 调用.then()方法时，成功的回调函数是必选的，失败的回调函数是可选的
p.then(result => {}, error => {})

（3）.then()的特性

如果上一个.then()返回一个Promise对象，则可以使用下一个.then()为Promise对象设置处理函数

（4）.catch()：捕获执行时发生的错误

（5）Promise.all()会发起并行的Promise异步操作。执行完所有的操作才会执行.then()

（6）Promise.race()发起并行的Promise异步操作，谁执行最快结果为哪个

（7）async/await

作用：简化Promise.then()的调用

async将一个普通函数声明称为异步函数，用await声明的Promise对象，会返回.then()执行后的返回值

用async声明的函数，在第一个await之前是同步执行的，await开始为异步执行

7、事件循环

（1）JS是单线程执行的，在主线程上会有同步和异步任务，碰到异步任务会交给宿主环境执行，主线程先执行同步任务

（2）宿主环境执行完异步任务之后，会将还没有执行的回调函数放入事件队列中等待执行

（3）主线程上的同步任务执行完后，会查看任务队列中是否有待执行的任务，如果有，将任务队列中的任务在主线程上执行

（4）然后进行事件循环，重复之前的操作

8、宏任务和微任务

（1）异步任务分为宏任务和微任务

（2）宏任务：异步Ajax请求、定时器、文件操作、其它宏任务

（3）微任务：.then()/catch()/finally()、process.nextTick、其它微任务

（4）微任务～宏任务1～微任务～宏任务2～微任务……

ES6模块化与异步编程