ES6模块化与异步编程高级用法（面试重点）

ES6模块化与异步编程

本部分你要弄清楚的东西

  1. 如何使用 ES6 的模块化语法
  2. 如何使用 Promise 解决回调地狱的问题
  3. 使用 async/await 简化 Promise 的调用
  4. 甚么是事件循环EventLoop
  5. 常见的宏任务与微任务，以及它们的执行顺序

1. ES6模块化

1.1 Node.js中的模块化。

Node.js 遵循了 CommonJS 的模块化规范

  • 导入其它模块使用 require() 方法
  • 模块对外共享成员使用 module.exports 对象

1.2 甚么是 ES6 模块化规范

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

ES6 模块化规范中定义：

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

1.3 在Node.js中使用ES6模块化

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

  • 安装v14.15.1及更高版本的 Node.js
  • 在package.json的根节点中添加 "type": "module"

1.4 ES6模块化的基本语法

  1. 默认导出与默认导入
  2. 按需导出与按需导入
  3. 直接导入并执行模块中的代码

1.4.1 默认导出：

/**
 *    demo1.js
 */
let a = 10; // 模块私有成员 a
let b = 20; // 模块私有成员 b，因为没有被 export 共享出去，因此无法被外界访问到
fucntion show() {} // 模块私有方法 show

// 使用export default 默认导出，对外共享模块成员。
// 每个模块中，只允许使用唯一的一次 export default
export default {
    a,
    show
}

1.4.2 默认导入：

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

导入时接收的名称为合法的任意名称

每个模块中，只允许使用唯一一次 export default

/**
 *  test1.js
 */
// 导入模块。
import demo from './demo.js'

console.log(demo); // 输出： { a: 10, show: [ Function: show] }

1.4.3 按需导出

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

/**
 * demo2.js
 */

// 按需导出变量
export let n1 = 'kof';
export let n2 = 'wing';
// 按需导出 select 方法
export function select() {}

1.4.4 按需导入

按需导入的成员名称必须和按需导出的名称保持一致
按需导入时，可以使用 as 关键字进行重命名
按需导入可以和默认导入一起使用

/**
 *  test2.js
 */
// 导入模块成员
import { n1, n2 as m2 } from './demo2.js'

console.log(n1); // 打印输出： kof
console.log(m2); // 打印输出:  wing

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

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

/**
 * demo3.js
 */
for (let i = 0; i < 3; i++) {
    console.log(i);
}

在 test3.js 中书写如下代码，可以在控制台直接看到输出结果。

import './demo3.js'    
// 1 2 3

2. Promise

2.1 甚么是回调地狱(重点)

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

setTimeout(() => {
  console.log('延时 1s 后输出');

  setTimeout(() => {
    console.log('延时 2s 后输出');

    setTimeout(() => {
      console.log('延时 3s 后输出');
    }, 3000);
  }, 2000);
},1000);

回调地狱的缺点：

  • 代码耦合性太强，牵一发而动全身，难以维护
  • 大量冗余的代码相互嵌套，代码的可读性变差

2.2 Promise的基本概念

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

1. Promise 是一个构造函数

  • 我们可以创建 Promise 的实例 const p = new Promise()
  • new 出来的 Promise 实例对象，代表一个异步操作

2. Promise.prototype 上包含一个 .then() 方法

  • 每一次 new Promise() 构造函数得到的实例对象，
  • 都可以通过原型链的方式访问到 .then() 方法，例如 p.then()

3. .then() 方法用来预先指定成功和失败的回调函数

  • p.then(成功的回调函数，失败的回调函数)
  • p.then(result ={ }, error ={ })
  • 调用 .then() 方法时，成功的回调函数是必选的、失败的回调函数是可选的

2.3 基于 then-fs 读取文件内容

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

npm install then-fs

2.3.1 then-fs 的基本使用

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

/**
 * 基于then-fs读取文件内容
 */
import thenFs from 'then-fs'

// .then() 中的失败回调时可选的，可以被省略
thenFs.readFile('./files/1.txt', 'utf8').then((r1) => {console.log(r1)})
thenFs.readFile('./files/2.txt', 'utf8').then((r2) => {console.log(r2)})
thenFs.readFile('./files/3.txt', 'utf8').then((r3) => {console.log(r3)})

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

2.3.2 then() 方法的特性

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

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

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

import thenFs from 'then-fs'

thenFs
  .readFile('./files/11.txt', 'utf8')
  .catch((err) => {
    console.log(err.message)
  })
  .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)
  })

2.3.4 通过 .catch 捕获错误

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

import thenFs from 'then-fs'

thenFs.readFile('./files/1.txt', 'utf8')
.then((r1) => {
    console.log(r1)
})
.catch(err => {
    console.log(err.message)
}

注意： .catch() 的位置决定了程序奔溃出错时终止的地方，所在位置出错，则后续代码不会继续执行。

2.3.5 Promise.all() 方法

都执行完了再输出。（等待机制，都到了再一起）

import thenFs from 'then-fs'

const promiseArr = [
  thenFs.readFile('./files/1.txt', 'utf8'),
  thenFs.readFile('./files/2.txt', 'utf8'),
  thenFs.readFile('./files/3.txt', 'utf8'),
]

Promise.race(promiseArr).then(result => {
  console.log(result);
})

输出结果为： ['111', '222', '333']

2.3.6 Promise.race() 方法

谁先执行完就输出谁。（赛跑机制，谁快谁先）

import thenFs from 'then-fs'

const promiseArr = [
  thenFs.readFile('./files/3.txt', 'utf8'),
  thenFs.readFile('./files/2.txt', 'utf8'),
  thenFs.readFile('./files/1.txt', 'utf8'),
]

Promise.race(promiseArr).then(result => {
  console.log(result); 
})

输出结果： 111或者222或者333

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

import fs from 'fs'

// 1.方法名为getFile
// 2.方法接收一个形参 fpath，表示要读取的文件路径
function getFile(fpath) {
  // 3.方法的返回值为 Promise 的实例对象
  // Promise 异步操作的结果，可以调用 resolve 或 reject 回调函数进行处理
  return new Promise(function (resolve, reject) {

// 4.下面这行代码表示这是一个具体的、读文件的异步操作
fs.readFile(fpath, 'utf8', (err, dataStr) => {

  // 如果读取失败，则调用“失败的回调函数”
  if (err) return reject(err)
  // 如果读取成功，则调用“成功的回调函数”
  resolve(dataStr)
})
  })
}
// 4.调用方法
getFile('./files/11.txt').then((r1) => {
    console.log(r1)
  })
.catch((err) => {
    console.log(err.message)
})

3. async/await

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

代码如下：

import thenFs from 'then-fs'

thenFs.readFile('./files/1.txt', 'utf8').then((r1) => {console.log(r1)})

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

import thenFs from 'then-fs'

console.log('A')
async function getAllFile() {
  console.log('B')
  const r1 = await thenFs.readFile('./files/1.txt', 'utf8')
  console.log(r1)
  const r2 = await thenFs.readFile('./files/2.txt', 'utf8')
  console.log(r2)
  const r3 = await thenFs.readFile('./files/3.txt', 'utf8')
  console.log(r3)
  console.log('D')
}

getAllFile()
console.log('C')

async/await 的使用注意事项：

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

***循环EventLoop

首先说明一点，js是单线程的编程语言。

单线程执行任务队列时必须等待上一任务完成后才能执行后续的任务，这就导致当上一任务及其耗时的时候，后续任务需要一直等待，从而出现了程序的假死现象。

4.1 同步任务与异步任务

4.1.1 同步任务：

  • 又叫做非耗时任务，指的是在主线程上排队执行的那些任务
  • 只有前一个任务执行完毕，才能执行后一个任务

4.1.2 异步任务：

  • 又叫做耗时任务，异步任务由 JavaScript 委托给 宿主环境 进行执行
  • 当异步任务执行完成后，会通知 JavaScript 主线程执行异步任务的回调函数。

4.1.3 宿主环境：

就是js运行时的环境。
如果是在浏览器中运行，那么宿主环境就是浏览器。如果是Node.js环境，那么宿主环境就是Node。

4.2 同步任务与异步任务的执行过程

  1. 同步任务由 JavaScript 主线程次序执行
  2. 异步任务委托给宿主环境执行
  3. 已完成的异步任务对应的回调函数，会被加入到任务队列中等待执行
  4. JavaScript 主线程的执行栈被清空后，会读取任务队列中的回调函数，次序执行
  5. JavaScript 主线程不断重复上面的第 4 步

4.3 EventLoop事件循环

4.3.1 事件循环的基本概念

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

4.3.2 举鸽栗子说明事件循环，分析输出的顺序

import thenFs from 'then-fs'

console.log('A')
thenFs.readFile('./files/1.txt', 'utf-8').then(dataStr => {
  console.log('B')
})

setTimeout(() => {
  console.log('C')
}, 0)
console.log('D')

输出结果： ADCB

过程：

  • A 和 D 属于同步任务。会根据代码的先后顺序依次被执行。
  • C 和 B 属于异步任务。它们的回调函数会被加入到任务队列中，等待主线程空闲时再执行。

5. 宏任务和微任务

js把异步任务进行了再次划分，将其分为 宏任务 和 微任务

5.1 宏任务(macrotask)

包括:

  • 异步 Ajax 请求、
  • setTimeout、setInterval
  • 文件操作
  • 其它宏任务

5.2 微任务(microtask)

包括：

  • Promise.then、.catch 和 .finally
  • process.nextTick
  • 其它微任务

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

  • 每一个宏任务执行完之后，都会检查是否存在待执行的微任务。
  • 如果有，则执行完所有微任务之后，再继续执行下一个宏任务。
  • ( 就是吃干饭和吃稀饭，有干饭就吃干饭，干饭吃完了再吃稀饭 ）

5.3.1 举个栗子。求以下代码的输出顺序（经典面试题奥）

console.log('1')
setTimeout(() => {
  console.log('2')
  new Promise((resolve) => {
    console.log('3')
    resolve()
  }).then(() => {
    console.log('4')
  })
})

new Promise((resolve) => {
  console.log('5')
  resolve()
}).then(() => {
  console.log('6')
})

setTimeout(() => {
  console.log('7')
  new Promise((resolve) => {
    console.log('8')
    resolve()
  }).then(() => {
    console.log('9')
  })
})

输出顺序为： 156234789 , 建议画个图一步一步来，这样好理解一下

6. API接口案例(吾等懒得写了)

全部评论

相关推荐

不愿透露姓名的神秘牛友
昨天 14:10
点赞 评论 收藏
分享
10-18 13:02
西安理工大学 C++
回归0offer
牛课上学的话术是真爽
牛舌：如果我不想去，不管对方给了多少，我一般都会说你们给得太低了。这样他们就会给下一个offer的人更高的薪资了。
点赞 评论 收藏
分享
10-10 21:38
湖南文理学院 Web前端
点赞 评论 收藏
分享
11-18 17:07
河南工业大学 Java
阅文一面面经--估计是凉面
自己太菜了，非常紧张，好多问题说的云里雾里的。逮着项目一直问1&nbsp;了解阅文吗2&nbsp;我看你项目有用到jwt令牌，说说jwt令牌用来干什么的，优缺点是什么3&nbsp;说一说spring&nbsp;cache在项目中是怎么用的，为什么要用spring&nbsp;cache4&nbsp;Reds&nbsp;的hash结构怎么实现购物车数据的高效存储与快速读取5&nbsp;redis的数据结构有哪些6&nbsp;spring&nbsp;aop在项目中是怎么使用的，如何使用7&nbsp;什么是sql注入，如何防止sql注入8&nbsp;前后端请求的流程是怎么样的9&nbsp;用过git吗，怎么使用的，一个项目使用git具体流程是什么10&nbsp;如果我想控制多线程的数量，以及多线程的执行时间不超过一定值，应该怎么办...
查看13道真题和解析
点赞 评论 收藏
分享
1 收藏 评论
分享

全站热榜

正在热议
# 25届秋招总结 #
253274次浏览 2060人参与
# 学历or实习经历，哪个更重要 #
41623次浏览 305人参与
# 北方华创开奖 #
23100次浏览 259人参与
# 地方国企笔面经互助 #
2662次浏览 6人参与
# 0offer是寒冬太冷还是我太菜 #
883721次浏览 7880人参与
# 选完offer后，你后悔学本专业吗 #
11656次浏览 80人参与
# 应届生被毁约被毁意向了怎么办 #
27536次浏览 241人参与
# 你最想要的公司福利是？ #
40563次浏览 129人参与
# 查收我的offer竞争力报告 #
17708次浏览 234人参与
# 一觉醒来，我觉醒了超级打工人系统 #
3040次浏览 35人参与
# 机械应届生薪资要多少才合适？ #
12453次浏览 60人参与
# 面试体验感最好的是哪家？ #
83103次浏览 811人参与
# 如何写一份好简历 #
603217次浏览 8464人参与
# 秋招OC许愿 #
227110次浏览 1874人参与
# 秋招被确诊为…… #
57489次浏览 313人参与
# 你觉得第一学历对求职有影响吗？ #
14930次浏览 121人参与
# 面试题刺客退退退 #
137539次浏览 2092人参与
# 来聊聊机械薪资天花板是哪家 #
64772次浏览 436人参与
# 总结:哪家公司面试体验感最差 #
25942次浏览 129人参与
# 不给转正的实习，你还去吗 #
1517774次浏览 16979人参与
# 比亚迪求职进展汇总 #
562069次浏览 2778人参与
牛客网
牛客企业服务