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接口案例(吾等懒得写了)

全部评论

相关推荐

头像 会员标识
12-18 17:49
浙江大学 Java
点赞 评论 收藏
分享
12-22 13:21
魔门塔（苏州）科技有限公司_感知算法工程师(准入职员工)
点赞 评论 收藏
分享
12-12 21:37
哈尔滨工业大学 算法工程师
点赞 评论 收藏
分享
12-02 16:58
三峡大学 FPGA工程师
点赞 评论 收藏
分享
12-17 12:17
韶音科技_电子工程师(准入职员工)
韶音科技内推，韶音科技内推码
韶音科技&nbsp;可靠性工程师&nbsp;面经HR面&nbsp;7.1&nbsp;（20-30min）HR很和善，问的问题不难回答主要是针对学习成绩、高考排名和所学科目情况针对项目情况也有一些基本的了解随后是一些生活兴趣方面的问题反问总的来说难度不大技术面&nbsp;7.29&nbsp;（30min左右）技术面很专业&nbsp;详细问了项目内容是连续性的追问&nbsp;针对整个项目框架项目具体细节然后针对某一个板块从你的思路开始深挖包括理论、实践以及解决方案，有一定难度建议多巩固理论知识且追问节奏较快，有压力反问环节综合面&nbsp;8.5&nbsp;（30min）是一位女主管&nbsp;感觉水平很高问题都很有针对性，也是深挖项目感觉她比较追求高效率也可能是我太啰嗦了，建议言简意赅有重点的回答询问方...
点赞 评论 收藏
分享
评论
1
收藏
分享

全站热榜

更多

创作者周榜

更多
正在热议
更多
# 2025年终总结 #
149279次浏览 2538人参与
# 秋招落幕，你是He or Be #
3456次浏览 77人参与
# 应届生进小公司有什么影响吗 #
109182次浏览 1116人参与
# 比亚迪工作体验 #
70321次浏览 254人参与
# 你面试体验感最差/最好的公司 #
3386次浏览 57人参与
# 工作中听到最受打击的一句话 #
2746次浏览 62人参与
# 大厂VS公务员你怎么选 #
71507次浏览 661人参与
# 重来一次，你会对开始求职的自己说 #
3174次浏览 72人参与
# 一人说一个提前实习的好处 #
3751次浏览 75人参与
# 团建是“福利”还是是 “渡劫” #
4199次浏览 112人参与
# 实习没事做是福还是祸？ #
8652次浏览 137人参与
# 如何排解工作中的焦虑 #
244198次浏览 2243人参与
# 从顶到拉给所有面过的公司评分 #
144841次浏览 518人参与
# 今年你最想重开的一场面试是？ #
1544次浏览 26人参与
# 你小心翼翼的闯过多大的祸？ #
7183次浏览 109人参与
# 联影求职进展汇总 #
123882次浏览 781人参与
# OPPO求职进展汇总 #
755984次浏览 5390人参与
# 互联网公司爆料 #
158635次浏览 724人参与
# 产品实习，你更倾向大公司or小公司 #
189155次浏览 2053人参与
# 秋招结束之后的日子 #
113941次浏览 1040人参与
牛客网
牛客网在线编程
牛客网题解
牛客企业服务