ES6模块化首先,在介绍es6模块化之前,让我们来先简单了解一下ES6 模块与CommonJS 模块的差异学习 Jav

首先,在介绍es6模块化之前,让我们来先简单了解一下ES6 模块与CommonJS 模块的差异

学习 JavaScript 语言的时候，你会发现它有两种格式的模块。

一种是 ES6 模块，简称 ESM；另一种是 Node.js 专用的 CommonJS 模块，简称 CJS。

两种模块的差异: 语法上面，CommonJS 模块使用require()加载和module.exports输出，ES6 模块使用import和export。

用法上面，require()是同步加载，后面的代码必须等待这个命令执行完，才会执行。import命令则是异步加载，或者更准确地说，ES6 模块有一个独立的静态解析阶段，依赖关系的分析是在那个阶段完成的，最底层的模块第一个执行。

1.什么是es6模块化?

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

ES6模块化规范中定义:

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

2.在node.js中体验ES6模块化需要的准备.

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

确保安装了v14.15.1或更高版本的node.js(可以打开终端输入node -v来查询当前的版本)
在package.json的根节点中添加"type":"module"节点, 操作如下:

3.默认导出与默认导入.

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

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

注意点:

每个模块中,只允许使用唯一的一次export default,否则会报错!
默认导入是的接收名称可以任意名称,只要是合法的成员名称即可

4.按需导出与按需导入.

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

按需导入的语法:import{按需导入成员}from '模块标识符'

注意事项:

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

5.直接导入并执行里面的代码.

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

在终端,直接就能打印出0,1,2

6.Promise

1.`Promise`是什么?

主要用于异步计算
可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
可以在对象之间传递和操作Promise，帮助我们处理队列

2.Promise的作用:

一般来说我们会碰到的回调嵌套都不会很多，一般就一到两级，但是某些情况下，回调嵌套很多时，代码就会非常繁琐，会给我们的编程带来很多的麻烦，这种情况俗称——回调地狱。这时候我们的Promise就应运而生、粉墨登场了

Promise是用来解决两个问题的：

回调地狱，代码难以维护，常常第一个的函数的输出是第二个函数的输入这种现象
Promise可以支持多个并发的请求，获取并发请求中的数据
这个Promise可以解决异步的问题，本身不能说Promise是异步的

3.Promise的基本概念:

1.Promise是一个构造函数

我们可以创建Promise的实例 const=new Promise
new 出来的Promise实例对象,代表一个异步操作 2.Promise.prototype上包含一个.then()方法
每一次new Promise()构造函数得到的实例对象
都可以通过原型链的方式访问到.then()方法,例如p.then() 3.then()方法用来预先指定成功和失败的回调函数
p.then(成功的回调函数,失败的回调函数)
p.then(result=>{},err>{})
调用.then()方法时,成功的回调函数是必选的,失败的回调函数是可选的

4.Promise中的方法:

.then()方法

由于node.js官方提供的fs模块仅支持以回调函数的方式读取文件,不支持 Promise的调用方式.因此,需要先运行如下的命令,安装then-fs这个第三方包

npm i then-fs

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

.then()方法的特性

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

.catch()方法

在Promise的链式操作中如果发生了错误,可以使用Promise.prototype.catch方法进行捕获和处理. 代码示例:

thenFs.readFile('./files/11.txt,utf8')//文件不存在读取失败,后面的3个.then都不执行
.then(r1=>{
console.log(r1)
return thenFs.readFile('./files/2.txt','utf8')
})
.then(r2=>{
console.log(r2)
return thenFs.readFile('./files/3.txt','utf8')
})
.then(r3=>{
console.log(r3)
})
.catch(err=>{ //使用.catch()方法,捕获第1行发生的错误,并输出错误的消息
  console.log(err.message)
})

Promise.all()方法:

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

7.async/await

1.什么是async/await?

async/await是ES8引入的新语法,用来简化Promise异步操作.在async/await出现之前,开发者只能通过链式.then()的方式处理Promise异步操作,这样虽然解决了回调地狱的问题,但是也使得代码冗余,阅读性差,不易理解

async/await输写的代码与.then()书写的代码对比:

.then():

async/await:

另外,在使用async/await的时候还有两点注意事项:

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

ES6模块化