Vue前置知识之ES6模块化与异步编程高级用法

前端模块化规范的分类

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

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

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

什么是 ES6 模块化规范

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

ES6 模块化规范中定义：
⚫ 每个 js 文件都是一个独立的模块
⚫ 导入其它模块成员使用 import 关键字
⚫ 向外共享模块成员使用 export 关键字

5、ES6 模块化的基本语法

ES6 的模块化主要包含如下 3 种用法：
① 默认导出与默认导入
② 按需导出与按需导入
③ 直接导入并执行模块中的代码

5.1 默认导出

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

如果我们想让外部可以访问本文件中的变量或者方法，那么我们只要在定义的export default{}中挂载我们想要让外界访问的变量或者方法即可，如上图中的代码我们想让外界访问n1，和方法show，那么我们只要在花括号中挂载上变量名和方法名即可，变量名与变量名之间逗号分隔。

5.1 默认导入

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

注意在JavaScript在HTML页面中使用单引号即可，这个在JavaScript中有提到。

在上面的代码中，“./”的意思是从和自己平级的目录中找文件，后面的就是原文件名了，然后将从原文件中导出的所有内容封装成一个对象放在m1变量中，m1是我们所取的引入文件的名字。

5.1 默认导出的注意事项

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

5.1 默认导入的注意事项

默认导入时的接收名称可以任意名称，只要是合法的成员名称即可。

5.2 按需导出

按需导出的语法：export 按需导出的成员

5.2 按需导入

按需导入的语法：import {s1} from ‘模块标识符’

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

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

示例：

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

如果只想单纯的执行某个模块中的代码，并不需要得到模块化中向外共享的成员。此时可以直接导入并执行模块代码，如下

Promise

1. 回调地狱

多层回调函数的相互嵌套，就形成了回调地狱。示例代码如下：

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

为了解决回调地狱的问题，ES6（ECMAScript 2015）中新增了 Promise 的概念。

1.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 读取文件内容

3.1 then-fs 的基本使用

调用 then-fs 提供的 readFile() 方法，可以异步地读取文件的内容，它的返回值是 Promise 的实例对象。因此可以调用 .then() 方法为每个 Promise 异步操作指定成功和失败之后的回调函数。示例代码如下：

注意：上述的代码无法保证文件的读取顺序，需要做进一步的改进。

3.2 .then() 方法的特性

如果上一个 .then() 方法中返回了一个新的 Promise 实例对象，则可以通过下一个 .then() 继续进行处理。通过 .then() 方法的链式调用，就解决了回调地狱的问题。

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

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

3.4 通过 .catch 捕获错误

在 Promise 的链式操作中如果发生了错误，可以使Promise.prototype.catch 方法进行捕获和处理：

如果不希望前面的错误导致后续的 .then 无法正常执行，则可以将 .catch 的调用提前，示例代码如下：

3.5 Promise.all() 方法

Promise.all() 方法会发起并行的 Promise 异步操作，等所有的异步操作全部结束后才会执行下一步的 .then 操作（等待机制）。示例代码如下：

注意：数组中Promise实例的顺序，就是最终结果的顺序。

3.6 Promise.race() 方法

Promise.race() 方法会发起并行的 Promise 异步操作，只要任何一个异步操作完成，就立即执行下一步的.then 操作（赛跑机制）。示例代码如下：

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

方法的封装要求：
① 方法的名称要定义为 getFile
② 方法接收一个形参 fpath，表示要读取的文件的路径
③ 方法的返回值为 Promise 实例对象

4.1 getFile 方法的基本定义

注意：第五行代码中的new Promise()只是创建了一个形式上的异步操作。

4.2 创建具体的异步操作

如果想要创建具体的异步操作，则需要在 new Promise() 构造函数期间，传递一个 function 函数，将具体的异步操作定义到 function 函数内部。示例代码如下：

4.3 获取 .then 的两个实参

通过 .then() 指定的成功和失败的回调函数，可以在 function 的形参中进行接收，示例代码如下：

4.4 调用 resolve 和 reject 回调函数

Promise 异步操作的结果，可以调用 resolve 或 reject 回调函数进行处理。示例代码如下：

async/await

什么是async/await

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

.then()链式调用的优点：解决了回调地狱的问题。
但是也有缺点：代码冗余、可读性差、不易理解的问题。

基本使用

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

如何起到简化作用的呢？
在上面的代码中，我们知道，thenFs.readFile()方法会返回一个Promise实例对象，但是我们在前面加上了await之后，它返回的就不再是一个Promise实例对象，而是单纯的就是文件内容，即r1输出就是111；
同时如果方法内部使用了await，那么该方法就必须要在前面加上async。

async和await使用注意事项

为什么会像上面这样输出呢？这就要扯到JavaScript中的异步回调机制。
在上面的代码中，主程序栈会从上到下依次执行代码，所以先输出A。
因为getAllFile()方法还未被调用，所以跳过执行，直到它被调用，于是主程序栈进入方法内部，从上到下，先打印B，但是r1、r2、r3都是异步程序，它们此时会被异步调度处理程序接管，而不是在主程序中，且因为这三个方法没被使用到，所以异步任务队列中也没有这三个方法，所以理论上主程序栈会跳过这仨先执行打印D的，然后等全部的同步任务执行结束之后才会执行异步任务，可是因为这仨方法也不是普通方法，它们身上有await关键字标识，因为在async方法中，第一个await之前的代码会同步执行（所以B打印了），而await后面的代码会异步执行（所以D暂时不会被打印，即使它是同步程序，但因为是在await后面出现，所以此时变成了异步程序）。所以主程序栈继续执行，打印最后一个同步任务输出C，此时同步任务执行结束，异步任务才得以执行，所以最后输出111,222,333，D。

Event Loop（事件循环）

这个其实在JavaScript中讲过，这里再复习一遍好了。

JavaScript是一门单线程语言

同步任务和异步任务

宿主环境就是当时运行JavaScript代码的环境，比如浏览器。

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

这个过程在我本栏目的另一篇关于学习JavaScript的博客中有详细解释，不懂的可以去我那篇博客看。

EventLoop的基本概念

所以从上面我们可以总结得到EventLoop的概念：

JavaScript主线程从任务队列中读取异步任务的回调函数，放到执行栈中依次执行。这个过程是循环不断的，所以整个的这种运行机制就被称为EventLoop（事件循环）。

结合EventLoop分析输出顺序

上面这个题有个小坑，就是我一开始以为这俩异步任务的处理速度是相同的，所以会按照先后顺序被主程序栈给执行。但其实不是这样的，延时函数会比读取文件那个函数执行速度快一些，因为它0秒就可以执行完，所以会先进入异步任务队列等待执行，所以正确输出结果应该是ADCB。

宏任务和微任务

什么是宏任务和微任务

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

举例子说明：

一个典型的面试题

为啥是这么输出呢？
因为首先易错点（也是我第一次做错的地方）是，new Promise是一个同步任务，它就是简单的创建了个函数而已，所以是同步任务，所以肯定2先输出，但是它还有个.then方法，是回调函数，那这肯定是异步任务了，而且是异步任务中的微任务，所以被放进异步任务队列中的微任务队列。先不执行，然后现在还有一个同步任务，打印输出4，现在同步任务执行结束，异步任务队列当中还有一个延时函数，它属于宏任务，按照我们之前的定义，微任务的优先处理级别是比宏任务高的，所以这里先输出3，最后才会去执行输出1，所以输出顺序：2 4 3 1；

再来一个

还是很好分析的，这里我就不啰嗦了。总之记住，所有同步任务运行结束后，一定是先去异步任务队列中找是否有微任务存在，有的话一定是先执行微任务，然后再去执行宏任务，执行一个宏任务要执行完全，即如果这个宏任务包含有微任务的话，也要把微任务解决完了再继续执行下一个宏任务。

总结