学习笔记-Node模块化

Y jm

已于 2022-10-11 20:39:27 修改

阅读量767

点赞数

文章标签： es6 前端 ecmascript

于 2022-10-10 20:27:10 首次发布

本文链接：https://blog.csdn.net/yjm_6688/article/details/127250875

版权

01-模块化

一、什么是模块化

模块化是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说，模块是可组合、分解和更换的单元。

1、现实生活中的模块化

小霸王游戏机和卡带的关系

2、编程领域中的模块化

编程领域中的模块化，就是遵守固定的规则，把一个大文件拆成独立并互相依赖的多个小模块。

把代码进行模块化拆分的好处：

1、提高了代码的复用性

2、提高了代码的可维护性

3、可以实现按需加载

二、模块化规范

模块化规范就是对代码进行模块化的拆分与组合时，需要遵守的那些规则。

例如：

使用什么样的语法格式来引用模块
在模块中使用什么样的语法格式向外暴露成员

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

拓展

非模块化：

耦合性高，不利于代码维护
污染全局的命名空间，造成代码冲突

模块化：

减少命名冲突
功能独立，可以按需加载
大大提高了代码的可维护性和复用性（常用的规范：commonJS、ES6）

02-node中的模块化

一、Nodejs中模块的分类

Node.js 中根据模块来源的不同，将模块分为了 3 大类，分别是：
1、内置模块 (内置模块是由 Node.js 官方提供的，例如 fs、 path、 http 等)

2、自定义模块 (用户创建的每个 .js 文件，都是自定义模块)

3、第三方模块 (由第三方开发出来的模块，并非官方提供的内置模块，也不是用户创建的自定义模块，使用前需要先下载)

例子：

自定义模块：大事件中的 baseAPI.js

第三方模块：axios、layui 中的 form 表单

二、加载模块

使用强大的 require() 方法，可以加载需要的内置模块、用户自定义模块、第三方模块进行使用。例如：

//1、加载内置的fs模块
const fs = require('fs');

//2、加载用户自定义的模块
const custom = require('./custom.js');

//3、加载第三方模块
const moment = require('moment');

注意：

1、使用 require() 方法加载其它模块时，会执行被加载模块中的代码。

2、在使用 require ()方法加载用户自定义模块是可以省略.js 的后缀名

三、Nodejs中的模块作用域

1、什么是模块作用域

和函数作用域类似，在自定义模块中定义的变量、方法等成员，只能在当前模块内被访问，这种模块级别的访问限制，叫做模块作用域。

custom.js

// 1、在模块作用于中定义常量username
const username = '张三'；

// 2、在模块作用域中定义函数sayHello

function sayHello(){
  console.log("大家好，我是：" + username)
}

test.js

const custom = require('./custom.js');

//输出空对象：{}

//在02test.js模块中，无法访问到01custom.js模块中的私有成员
console.log(custom);

2、模块作用域的好处

防止了全局变量污染的问题

四、向外共享模块作用域中的成员

1、module对象

在每个 .js 自定义模块中都有一个 module 对象，它里面存储了和当前模块有关的信息

Module {
  id: '.',
  path: '/Users/zhaomaoqi/Desktop/备课/node备课/day02/code',
  exports: {},
  filename: '/Users/zhaomaoqi/Desktop/备课/node备课/day02/code/10.演示module对象.js',
  loaded: false,
  children: [],
  paths: [
    '/Users/zhaomaoqi/Desktop/备课/node备课/day02/code/node_modules',
    '/Users/zhaomaoqi/Desktop/备课/node备课/day02/node_modules',
    '/Users/zhaomaoqi/Desktop/备课/node备课/node_modules',
    '/Users/zhaomaoqi/Desktop/备课/node_modules',
    '/Users/zhaomaoqi/Desktop/node_modules',
    '/Users/zhaomaoqi/node_modules',
    '/Users/node_modules',
    '/node_modules'
  ]
}

2、module.exports 对象

在自定义模块中，可以使用 module.exports 对象，将模块内的成员共享出去，供外界使用。外界用 require() 方法导入自定义模块时，得到的就是 module.exports 所指向的对象。

代码

// 在一个自定义模块中，默认情况下， module.exports = {}

const age = 20;

// 向 module.exports 对象上挂载 username 属性
module.exports.username = 'zs';
// 向 module.exports 对象上挂载 sayHello 方法
module.exports.sayHello = function () {
  console.log('Hello!');
};
module.exports.age = age;

3、共享成员时的注意点

使用 require() 方法导入模块时，导入的结果，永远以 module.exports 指向的对象为准。

4、exports对象

由于 module.exports 单词写起来比较复杂，为了简化向外共享成员的代码，Node 提供了 exports 对象。 默认情况下，exports 和 module.exports 指向同一个对象。最终共享的结果，还是以 module.exports 指向的对象为准。

5、exports和module.exports的使用误区

时刻谨记，require() 模块时，得到的永远是 module.exports 指向的对象：

注意：为了防止混乱，建议大家不要在同一个模块中同时使用 exports 和 module.exports

五、Node.js 中的模块化规范

Node.js 遵循了 CommonJS 模块化规范，CommonJS 规定了模块的特性和各模块之间如何相互依赖。

CommonJS 规定：

1、每个模块内部，module 变量代表当前模块。

2、module 变量是一个对象，它的 exports 属性(即 module.exports) 是对外的接口。

3、加载某个模块，其实是加载该模块的 module.exports 属性。 require() 方法用于加载模块。

03-包的概念

一、什么是包

Node.js 中的第三方模块又叫做包。

就像电脑和计算机指的是相同的东西， 第三方模块和包指的是同一个概念，只不过叫法不同。

二、包的来源

不同于 Node.js 中的内置模块与自定义模块，包是由第三方个人或团队开发出来的，免费供所有人使用。注意： Node.js 中的包都是免费且开源的，不需要付费即可免费下载使用。

三、为什么需要包

由于 Node.js 的内置模块仅提供了一些底层的 API ，导致在基于内置模块进行项目开发的时，效率很低。
包是基于内置模块封装出来的，提供了更高级、更方便的 API，极大的提高了开发效率。

包和内置模块之间的关系，类似于 jQuery 和 浏览器内置 API 之间的关系。

例子：
原生 JS 获取 dom

document.getElementById('domid');

Jquery 获取 dom

$('#domid');

四、从哪里下载包

国外有一家 IT 公司，叫做 npm, Inc. 这家公司旗下有一个非常著名的网站:npm ，它是全球最大的包共享平台，你可以从这个网站上搜索到任何你需要的包，只要你有足够的耐心！到目前位置，全球约 1100 多万的开发人员，通过这个包共享平台，开发并共享了超过 120 多万个包供我们使用。npm, Inc. 公司提供了一个地址为https://registry.npmjs.org/ 的服务器，来对外共享所有的包，我们可以从这个服务器上下载自己所需要的包。

注意：

从 npm 网站上搜索自己所需要的包

从 https://registry.npmjs.org/ 服务器上下载自己需要的包

五、如何下载包

npm, Inc. 公司提供了一个包管理工具，我们可以使用这个包管理工具，从https://registry.npmjs.org/服务器把需要的包下载到本地使用。

这个包管理工具的名字叫做 Node Package Manager (简称 npm 包管理工具)，这个包管理工具随着 Node.js 的安装包一起被安装到了用户的电脑上。

大家可以在终端中执行 npm -v 命令，来查看自己电脑上所安装的 npm 包管理工具的版本号

03-npm初体验

一、格式化时间的传统做法

步骤

创建格式化时间的自定义模块
定义格式化时间的方法
创建补零函数
从自定义模块中导出格式化时间的函数
导入格式化时间的自定义模块
调用格式化时间的函数

二、格式化事件的高级做法

1、使用 npm 包管理工具，在项目中安装格式化时间的包 moment

2、使用 require() 导入格式化时间的包

3、参考 moment 的官方 API 文档对时间进行格式化

// 1. 导入需要的包
// 注意：导入的名称，就是装包时候的名称
const moment = require('moment');
// 2.参考moment官方API文档，调取对应的方法，对时间进行格式化
// 3.调用moment()方法获取当前时间
// 4.针对当前时间，调用format（）方法，按照指定的格式进行时间的格式化
const dt = moment().format('YYYY-MM-DD HH:mm:ss');
console.log(dt);

拓展

初始化 package.json

npm init

package name: 项目名字
version: 版本号
description: 对项目的描述
entry point: 项目的入口文件（一般你要用那个 js 文件作为 node 服务，就填写那个文件）
test command: 项目启动的时候要用什么命令来执行脚本文件（默认为 node app.js）
git repository: 如果你要将项目上传到 git 中的话，那么就需要填写 git 的仓库地址（这里就不写地址了）
keywords：项目关键字
author: 作者的名字（赵茂祺）
license: 发行项目需要的证书

三、在项目中安装包的命令

如果想在项目中安装指定名称的包，需要运行如下的命令：

注意：是在终端中

npm install 包的完整名称

上述的装包命令，可以简写成如下格式：

npm i 包的完整名称

四、初次装包后多了哪些文件

初次装包完成后，在项目文件夹下多一个叫做 node_modules 的文件夹和 package-lock.json 的配置文件。

其中：

node_modules 文件夹用来存放所有已安装到项目中的包。require() 导入第三方包时，就是从这个目录中查找并加载包。

package-lock.json 配置文件用来记录 node_modules 目录下的每一个包的下载信息，例如包的名字、版本号、下载地址等。

注意：程序员不要手动修改 node_modules 或 package-lock.json 文件中的任何代码，npm 包管理工具会自动维护它们。

拓展

package.json

package.json 称之为包描述文件或者包说明文件，在项目中一般会创建 package.json 文件。描述相关的项目的项目名称，项目作者，所依赖的第三方包

package-lock.json

是在 npm install 时候生成的一份文件，用以记录当前状态下实际安装的各个 npm package 的具体来源和版本号。package-lock.json 文件的作用锁定安装时的包的版本号，并且需要上传到 git，以保证其他人在 npm install 时大家的依赖能保证一致。

五、安装指定版本的包

默认情况下，使用 npm install 命令安装包的时候，会自动安装最新版本的包。如果需要安装指定版本的包，可以在包名之后，通过 @ 符号指定具体的版本，例如：

npm i moment@2.22.2

六、包的语义化版本规范

包的版本号是以“点分十进制”形式进行定义的，总共有三位数字，例如 2.24.0

其中每一位数字所代表的的含义如下：

第 1 位数字： 大版本

第 2 位数字：功能版本

第 3 位数字： Bug 修复版本

版本号提升的规则：只要前面的版本号增长了，则后面的版本号归零。

04-ES6模块化

一、 node.js 中如何实现模块化

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

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

模块化的好处：

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

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

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

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

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

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

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

三、什么是 ES6 模块化规范

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

ES6 模块化规范中定义：

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

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

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

四、在 node.js 中体验 ES6 模块化

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

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

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

五、ES6模块化的基本语法

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

1、默认导出与默认导入

2、按需导出与按需导入

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

1、默认导出

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

let n1 = 10; //模块的私有成员n1
let n2 = 20; //模块的私有成员n2
function show() {
  //模块的私有方法
}

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

2、默认导入

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

3、默认导出与默认

//从 01m1.js 模块导入 export default 向外共享的成员
// 并使用 m1 成员进行接收
import m1 from './01m1.js';

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

导入的注意事项

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

let n1 = 10; //模块的私有成员n1
let n2 = 20; //模块的私有成员n1
function show() {
  //模块的私有方法
}

export default {//使用export default 默认到处语法，向外共享n1和show两个成员
  n1,
  show,
};
//这时候就报错了

export default {
  n2
};

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

//m1 是合法名称
import m1 from './01m1.js';

console.log(m1);

// 123m3不是合法的名称，因为成员名称不能以数字开头
import 123m3 from './01m1.js'

4、按需导出

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

//当前模块为03_m2.js
//向外按需导出变量s1
export let s1 = 'aaa';
//向外按需导出变量s2
export let s2 = 'ccc';
//向外按需导出方法 say
export function say() {}

5、按需导入

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

import { s1, s2, say } from './03.按需导出.js';

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

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

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

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

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

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

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

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

//模块：05_m3.js
//在当前模块中执行一个 for 循环操作
for (let i = 0; i < 3; i++) {
  console.log(i);
}

直接导入并执行模块代码，不需要的带模块向外共享的成员

import './05_m3.js';

05-Promise

一、回调地狱

1、什么是回调地狱

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

setTimeout(()=>{
  console.log('延时1秒')；
  setTimeout(()=>{
    console.log('延时2秒')；
    setTimeout(()=>{
      console.log('延时3秒')
    }，3000)
  }，2000)
}，1000)

回调地狱的缺点：

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

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

2、如何解决回调地狱

使用Promise

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

3、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() 方法时，成功的回调函数是必选的、失败的回调函数是可选的

二、基于回调函数按顺序读取文件内容

fs.readFild('./files/1.txt', 'utf8', (err1, r1) => {
  if (err1) return console.log(err1.message);
  fs.readFild('./files/2.txt', 'utf8', (err2, r3) => {
    if (err2) return console.log(err2.message);
    fs.readFild('./files/3.txt', 'utf8', (err3, r3) => {
      if (err3) return console.log(err3.message);
    });
  });
});

三、基于then-fs 读取文件内容

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

npm install then-fs

1、then-fs 的基本使用

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

import thenFs from 'then-fs';

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、.then()方法的特性

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

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

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

import thenFs from 'then-fs';

thenFs
  .readFile('./files/1.txt', 'utf8') //1、返回值是Promise的实例对象
  .catch((err) => {
    console.log(err.message);
  })
  .then((r1) => {
    //2、通过 .then为第一个Promise实例指定成功之后的回调函数
    console.log(r1);
    return thenFs.readFile('./files/2.txt', 'utf8'); //3、在第一个.then中返回的新的Promise实例对象
  })
  .then((r2) => {
    //4、继续调用.then为上一个.then的返回值指定成功之后的回调函数
    console.log(r2);
    return thenFs.readFile('./files/3.txt', 'utf8'); //5、在第二个.then中返回的新的Promise实例对象
  })
  .then((r3) => {
    //6、继续调用.then为上一个.then的返回值指定成功之后的回调函数
    console.log(r3);
  });

4、通过 .catch 捕获错误

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

import thenFs from 'then-fs';

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) => {//捕获第一行发生的错误，并输出错误的消息
    console.log(err.message);
  });

如果不希望前面的错误导致后续的 .then 无法正常执行，则可以将 .catch 的调用提前，示例代码如下：

import thenFs from 'then-fs';
thenFs.readFile('./files/11.txt', 'utf8')
.catch((err) => {//捕获第2行发生的错误，并输出错误信息
  console.log(err.message);//由于错误已被及时处理，不影响后续.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);
})

5、Promise.all()方法

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

import thenFs from 'then-fs';
//1.定义一个数组，存放3个读文件的一步操作
const promiseArr = [
  thenFs.readFile('./files/1.txt', 'utf8'),
  thenFs.readFile('./files/2.txt', 'utf8'),
  thenFs.readFile('./files/3.txt', 'utf8'),
];

//2.将Promise的数组作为Promise.all（）的参数
Promise.all(promiseArr)
  .then(([r1, r2, r3]) => {
    console.log(r1, r2, r3);
  })
  .catch((err) => {
    //捕获Promise异步操作中的错误
    console.log(err.message);
  });

注意：数组中 Promise 实例的顺序，就是最终结果的顺序！

6、Promise.race() 方法

Promise.race() 方法会发起并行的 Promise 异步操作， 只要任何一个异步操作完成，就立即执行下一步的.then 操作 (赛跑机制) 。示例代码如下：

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);
});

四、基于 Promise 封装读文件的方法

方法的封装要求：

方法的名称要定义为 getFile
方法接收一个形参 fpath，表示要读取的文件的路径
方法的返回值为 Promise 实例对象

1、getFile 方法的基本定义

//1、方法名为 getFile
//2、方法接收一个形参fpath，表示要读取的文件的路径
function getFile(fpath) {
  //3、方法的返回值为 Promise 的实例对象
  return new Promise();
}

注意：第 5 行代码中的 new Promise() 只是创建了一个形式上的异步操作。

2、创建具体的异步操作

如果想要创建具体的异步操作，则需要在 new Promise() 构造函数期间,传递一个 function 函数,将具体的异步操作定义到 function 函数内部。示例代码如下：

import fs from 'fs';

//1、方法名为 getFile
//2、方法接收一个形参fpath，表示要读取的文件的路径
function getFile(fpath) {
  //3、方法的返回值为 Promise 的实例对象
  return new Promise(function () {
    //4、下面这行代码，表示这是一个具体的，读文件的异步操作
    fs.readFile(fpath, 'utf8', (err, dataStr) => {});
  });
}

3、获取 .then 的两个实参

通过 .then() 指定的成功和失败的回调函数，可以在 function 的形参中进行接收，示例代码如下：

import fs from 'fs';

//1、方法名为 getFile
//2、方法接收一个形参fpath，表示要读取的文件的路径
function getFile(fpath) {
  //3、方法的返回值为 Promise 的实例对象
  //resolve形参是：调用getFile（）方法时，通过 .then 指定的“成功的”回调函数
  //reject形参是：调用getFile（）方法时，通过 .catch 指定的“失败的”回调函数
  return new Promise(function (resolve，reject) {
    //4、下面这行代码，表示这是一个具体的，读文件的异步操作
    fs.readFile(fpath, 'utf8', (err, dataStr) => {});
  });
}

//getFile方法的调用过程

getFile('./files/1.txt').then('成功回调函数', '失败的回调函数');

4、用 resolve 和 reject 回调函数

Promise 异步操作的结果，可以调用 resolve 或 reject 回调函数进行处理。示例代码如下：

import fs from 'fs';

//1、方法名为 getFile
//2、方法接收一个形参fpath，表示要读取的文件的路径
function getFile(fpath) {
  //3、方法的返回值为 Promise 的实例对象
  //resolve形参是：调用getFile（）方法时，通过 .then 指定的“成功的”回调函数
  //reject形参是：调用getFile（）方法时，通过 .then 指定的“失败的”回调函数
  return new Promise(function (resolve，reject) {
    //4、下面这行代码，表示这是一个具体的，读文件的异步操作
    fs.readFile(fpath, 'utf8', (err, dataStr) => {
      if (err) return reject(err)//如果读取失败，则调用“失败的回调函数”
      resolve(dataStr)//如果读取成功，则调用“成功的回调函数”
    })
  });
}

getFile('./files/11.txt')
  .then((r1) => {
    console.log(r1);
  })
  .catch((err) => console.log(err.message));

06-async/await

1、什么是 async/await

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

.then 链式调用的优点：解决了回调地狱的问题

.then 链式调用的缺点：代码冗余、阅读性差、不易理解

2、async/await 的基本使用

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

import thenFs from 'then-fs';

async function getAllFile() {
  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);
}

getAllFile();

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

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

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');

结果：

A
B
C
111 222 333
D

07-EventLoop

一、Javascript是单线程的语言

JavaScript 是一门单线程执行的编程语言。也就是说，同一时间只能做一件事情。

单线程执行任务队列的问题：

如果前一个任务非常耗时，则后续的任务就不得不一直等待，从而导致程序假死的问题。

二、同步任务和异步任务

为了防止某个耗时任务导致程序假死的问题， JavaScript 把待执行的任务分为了两类：

同步任务 (synchronous)

又叫做非耗时任务，指的是在主线程上排队执行的那些任务

只有前一个任务执行完毕，才能执行后一个任务

异步任务(asynchronous)

又叫做耗时任务，异步任务由 JavaScript 委托给宿主环境进行执行

当异步任务执行完成后，会通知 JavaScript 主线程执行异步任务的回调函数

例子：ajax

三、同步任务和异步任务的执行过程

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

四、EventLoop 的基本概念、经典面试题

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

正确的输出结果： ADCB。其中：

A 和 D 属于同步任务。会根据代码的先后顺序依次被执行

C 和 B 属于异步任务。它们的回调函数会被加入到任务队列中，等待主线程空闲时再执行

8-宏任务和微任务

一、什么是宏任务和微任务

JavaScript 把异步任务又做了进一步的划分，异步任务又分为两类，分别是：

宏任务 (macrotask)

异步 Ajax 请求、

setTimeout 、setInterval、

文件操作

其它宏任务

微任务 (microtask)

Promise.then 、.catch 和 .finally

process.nextTick

其它微任务

二、宏任务和微任务的执行顺序

每一个宏任务执行完之后，都会检查是否存在待执行的微任务，如果有，则执行完所有微任务之后，再继续执行下一个宏任务。

三、去银行办业务的场景

小云和小腾去银行办业务。首先，需要取号之后进行排队

宏任务队列

假设当前银行网点只有一个柜员，小云在办理存款业务时， 小腾只能等待

单线程，宏任务按次序执行

小云办完存款业务后，柜员询问他是否还想办理其它业务？

当前宏任务执行完， 检查是否有微任务

小云告诉柜员：想要买理财产品、再办个信用卡、最后再兑换点马年纪念币？

执行微任务，后续宏任务被推迟

小云离开柜台后，柜员开始为小腾办理业务

所有微任务执行完毕，开始执行下一个宏任务

四、分析下面代码输出顺序

答案：2431

分析：

先执行所有的同步任务

执行第 6 行、第 12 行代码

再执行微任务

执行第 9 行代码

再执行下一个宏任务

执行第 2 行代码

五、经典面试题

答案：156234789

Y jm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习笔记-Node模块化

模块化是指解决一个复杂问题时，自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说，模块是可组合、分解和更换的单元。和函数作用域类似，在自定义模块中定义的变量、方法等成员，只能在当前模块内被访问，这种模块级别的访问限制，叫做模块作用域。
复制链接

扫一扫