ES6模块化与异步编程高级用法

b站链接🔗：黑马程序员Vue全套视频教程，从vue2.0到vue3.0一套全覆盖，前端必会的框架教程_哔哩哔哩_bilibili

目录

一、ES6模块化

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

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

3、什么是ES6模块化规范

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

5. ES6 模块化的基本语法

5.1 默认导出与默认导入

5.2 按需导出与按需导入

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

二、Promise

1. 回调地狱

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

1.2 Promise 的基本概念

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

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

3.1 then-fs 的基本使用 

3.2 .then() 方法的特性

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

3.4 通过 .catch 捕获错误

3.5 Promise.all() 方法

3.6 Promise.race() 方法

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

4.1 getFile 方法的基本定义

4.2 创建具体的异步操作

4.3 获取 .then 的两个实参

4.4 调用 resolve 和 reject 回调函数

---

一、ES6模块化

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

node.js 遵循了 CommonJS 的模块化规范。其中：

· 导入其它模块使用 require() 方法

· 模块对外共享成员使用 module.exports 对象

模块化的好处：

大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块之间的相互调用，利人利己。

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

在 ES6 模块化规范诞生之前，JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。

但是，这些由社区提出的模块化标准，还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化 标准，例如：

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

CommonJS 适用于服务器端的 Javascript 模块化

太多的模块化规范给开发者增加了学习的难度与开发的成本。因此，大一统的 ES6 模块化规范诞生了！（ES6出现的原因即为了取代AMD、CMD、CommonJS，无论是浏览器端还是服务器端都能使用ES6）

3、什么是ES6模块化规范

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

ES6 模块化规范中定义：

· 每个 js 文件都是一个独立的模块

· 导入其它模块成员使用 import 关键字

· 向外共享模块成员使用 export 关键字

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

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

① 确保安装了 v14.15.1 或更高版本的 node.js （win+R-> cmd ->输入node -v回车查看node版本号）

② 在 package.json 的根节点中添加 "type": "module" 节点（例如 npm init -y初始化一个包管理文件，添加type配置，值为"module"，保存）

5. ES6 模块化的基本语法

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

① 默认导出与默认导入

② 按需导出与按需导入

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

5.1 默认导出与默认导入

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

// 此模块为01_m1.js

let n1 = 10 // 定义模块私有成员n1
let n2 = 20 // 定义模块私有成员n2 （外界访问不到n2，因为它没有被共享出去）

function show() {} // 定义模块私有方法show

export default { // 使用export default默认导出语法，向外共享n1和show两个成员
  n1,
  show
}

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

// 此模块为02_m1.js

// 从01_m1.js模块导入export default向外共享的成员
// 并使用m1成员进行修改

import m1 from './01_m1.js'

// 打印输出的结果为：
// { n1: 10, show: [Function: show] } 
console.log(m1)

默认导出的注意事项:

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

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

（不合法例如：数字开头，定义变量和常量时不允许）

5.2 按需导出与按需导入

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

// 当前模块为03_m2.js

// 向外按需导出变量s1 s2 和方法say
export let s1 = 'aaa'
export let s2 = 'ccc'
export function say() {}

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

// 该模块为04_m2.js
// 导入模块成员

import { s1, s2, say } from './03_m2.js'

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

P.S. 可以在vscode中打开终端，输入node 04（tab键补齐路径）回车获得打印结果

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

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

② 按需导入的成员名称必须和按需导出的名称保持一致

③ 按需导入时，可以使用 as 关键字进行重命名

import { s2 as str } from '03_m2.js' // 在此模块使用s2时应用重命名str而不是s2

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

// 03_m2.js

export let s1 = 'aaa'

export default