模块化，Promise，async和await，EventLoop

babii
81 阅读4分钟

模块化

ES6模块化

  1. 默认导出和默认导入
    • export default 成员
    • import xxx from 模块
  2. 按需导出和按需导入
    • export 成员
    • import {} from 模块

注意事项：

  • 每个模块中可以使用多次按需导出
  • 按需导入的成员名称必须和按需导出的名称保持一致
  • 按需导入时，可以使用as关键字进行重命名 import {s1,s2 as str2,s3} from './03.xxx.js'}
  • 按需导入可以默认导入一起使用

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

image.png

CommonJS

  1. 导入
    • module.exports = {...}
  2. 导出
    • require()

require和import的区别

标题requireimport
CommonJSES6
导出值返回拷贝返回引用
返回整个模块可以按需引入
运行时加载（动态）编译时加载（静态），不论在哪里引入都会提升到顶部
Node.js浏览器

image.png

Promise

回调地狱

多层回调函数的相互嵌套，就形成了回调地狱

基本概念

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

基于then-fs读取文件

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

基本使用

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

优化

Promise 支持链式调用，从而来解决回调地狱的问题 image.png

在 Promise 的链式操作中如果发生了错误，可以使用 promise.prototype.catch 方法进行捕获和处理，catch 的位置不一定要放到最后 image.png

image.png

Promise.all():

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

image.png **Promise.race():**

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

image.png

async和await

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

image.png

注意事项

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

image.png

EventLoop（时间循环）

同步任务和异步任务

概念

  • 同步任务：同步是一直阻塞模式，如果一个请求需要等待回调，那么会一直等待下去，直到有返回结果
    • 又叫做非耗时任务，指的是在主线程上排队执行的那些任务
    • 只有前一个任务执行完毕，才能执行后一个任务
  • 异步任务：异步是非阻塞模式，无需等待回调，可执行下一步的代码
    • 又叫做耗时任务，异步任务由 js 委托给宿主环境进行执行
    • 当异步任务执行完成后，会通知 js 主线程执行异步任务的回调函数
image.png

宏任务和微任务

  1. 宏任务：setTimeout，setInterval，setImmediate，I/O，rendering，异步ajax
    • setImmediate 是 Node.js 中的一个定时器函数，优先级高于 setTimeout。
  2. 微任务：process.nextTick，Promise，MutationObserver
    • process.nextTick 是 Node.js 中的一个特殊函数，它允许将回调函数推迟到当前事件循环的末尾执行，以便立即处理已排队的 I/O 操作之后执行回调
    • MutationObserver 是 JavaScript 中的一个 API，用于监视 DOM（文档对象模型）树的变化
image.png

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

image.png

执行顺序：

graph TD
同步任务 --> 微任务 --> 宏任务
avatar
文章
阅读
粉丝