【vue3.0】铺垫知识 | ES6模块化与异步编程高级用法

一、ES6模块化

1. 回顾：node.js 中如何实现模块化

2. 前端模块化规范的分类

3. 什么是 ES6 模块化规范

4. 在 node.js 中体验 ES6 模块化

5. ES6 模块化的基本语法

5.1 默认导出

5.2 默认导入

5.3 导出和导入的注意事项

5.4 按需导出

5.5 按需导入

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

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

---

二、Promise

1. 回调地狱

1.1 如何解决回调地狱的问题

为了解决回调地狱的问题，ES6（ECMAScript 2015）中新增了 Promise 的概念。即：可以通过Promise解决回调地狱的情况。

1.2 Promise 的基本概念

2 基于回调函数按顺序读取文件内容

3. 基于 then-fs 读取文件内容

3.1 then-fs 的基本使用

3.2 .then() 方法的特性

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

3.4 通过 .catch 捕获错误

注意 ： 如果把catch放到最后，那么当读取第一个文件时报错就会直接跳到catch去执行，而跳过了读取第二个第三个文件的代码。

3.5 Promise.all() 方法

3.6 Promise.race() 方法

4 基于 Promise 封装读文件的方法

4.1 getFile 方法的基本定义

new Promise()只是新建了一个异步对象，但我们并不知道这个Promise对象是一个用来读文件的Promise对象还是一个axios发请求的Promise对象。还没有具体指定其用法！

4.2 创建具体的异步操作

4.3 获取 .then 的两个实参

4.4 调用 resolve 和 reject 回调函数

具体例子如下图

getFile.then()里面传递的成功函数和失败函数是实参，而自己封装的Promise函数里的resolve和reject是形参。 相当于(r1) => {console.log(r1) }就是resolve函数，读取文件成功时，文件里的内容是拿到的dataStr，也就是r1。

---

三、async/await

1. 什么是 async/await

2. async/await 的基本使用

3. async/await 的使用注意事项

来自弹幕：

• 经典面试题，主线程和异步线程的执行顺序，永远主线程先执行
• JS主线程会开辟一个执行栈，同步任务将存储在执行栈中，检测到的异步任务将会传输到异步进程处理，异步处理完毕将送入任务队列，当执行栈中的同步任务全部执行完毕后，如果有异步任务，将会推入主线程处理
• 不懂同步和异步的去看pink老师讲的js里面的BOM的js执行队列

---

四、EventLoop

1. JavaScript 是单线程的语言

2. 同步任务和异步任务

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

4. EventLoop 的基本概念

5. 结合 EventLoop 分析输出的顺序

---

五、宏任务与微任务

1 什么是宏任务和微任务

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

3. 去银行办业务的场景

4. 分析以下代码输出的顺序

注意：

• new promise()是同步任务，一new就会去执行promise()里面的function。
• promise.then()是微任务，放在微任务队列
• setTimeOut()是宏任务，放在宏任务队列
• 当同步任务执行完后，会检查是否有微任务并将所有微任务执行，最后在执行setTimeOut的宏任务。
  

5. 经典面试题

面试题的视频讲解

掘金上关于宏任务，微任务的总结

---

六、API接口案例

七、总结