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

目录

1、ES6 模块化

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

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

3. 什么是 ES6 模块化规范 

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

5. ES6 模块化的基本语法 

5.1默认导出与默认导入

5.2按需导出与按需导入

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

2、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 封装读文件的方法

 3、async/await

1. 什么是 async/await 

2. async/await 的基本使用 

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

4、EventLoop

1. JavaScript 是单线程的语言 

2. 同步任务和异步任务 

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

4. EventLoop 的基本概念

5、宏任务和微任务 

1. 什么是宏任务和微任务 

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

6、API 接口案例 

1. 案例需求 

2. 主要的实现步骤 

3. 搭建项目的基本结构 

4. 创建基本的服务器 

5. 创建 db 数据库操作模块

6. 创建 user_ctrl 模块

7. 创建 user_router 模块

8. 导入并挂载路由模块 

9. 使用 try…catch 捕获异常

 总结:


#博学谷IT学习技术支持#

1、ES6 模块化

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

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

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

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

模块化的好处: 

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

利人利己

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

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

块化规范。 

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

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

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

3. 什么是 ES6 模块化规范 

ES6 模块化规范是浏览器端与服务器端通用的模块化开发规范。

ES6 模块化规范中定义: 

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

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

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

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

node.js 中默认仅支持 CommonJS 模块化规范,若想基于 node.js 体验与学习 ES6 的模块化语

法,可以按照如下两个步骤进行配置: 

确保安装了 v14.15.1 或更高版本的 node.js

在 package.json 的根节点中添加 "type": "module" 节点 

首先先检自己的node.js版本号

在终端中输入 npm init -y 生成package.json文件

在 package.json 的根节点中添加 "type": "module" 节点 

 

5. ES6 模块化的基本语法 

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

默认导出与默认导入  

按需导出与按需导入  

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

5.1默认导出与默认导入

默认导出 

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

let i = 10
function fn() {
    return 1
}

export default {
    i,
    fn
}

 默认导入

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

import obj from './01向外导出成员.js'

console.log(obj);  //{ i: 10, fn: [Function: fn] }

默认导出的注意事项

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

默认导入的注意事项 

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

 

5.2按需导出与按需导入

按需导出 

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

export let i = 1
export function fn() {
    return 'aaa'
}

 按需导入

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

import {i, fn} from './03.按需导出.js'

console.log(i);   //1
console.log(fn);  //[Function: fn]

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

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

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

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

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

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

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

入并执行模块代码,示例代码如下:

import './01向外导出成员.js' 

  

2、Promise 

1. 回调地狱 

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

 

回调地狱的缺点: 

代码耦合性太强,牵一发而动全身,难以维护

大量冗余的代码相互嵌套,代码的可读性变差 

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

为了解决回调地狱的问题,ES6(ECMAScript 2015)中新增了 Promise 的概念。 

1.2 Promise 的基本概念 

1.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. 基于回调函数按顺序读取

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值