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

目录

ES6 模块化

1、什么是 ES6 模块化规范

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

3、ES6 模块化的基本语法

Promise

1. 回调地狱

2、Promise 的基本概念

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

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

4.1 then-fs 的基本使用

4.2 .then() 方法的特性

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

4.4 通过 .catch 捕获错误

4.5 Promise.all() 方法

4.6 Promise.race() 方法

5. 基于 Promise 封装读文件的方法

1 getFile 方法的基本定义

2 创建具体的异步操作

3 获取 .then 的两个实参

4 调用 resolve 和 reject 回调函数

async/await

1. 什么是 async/await

2. async/await 的基本使用

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

EventLoop

1. JavaScript 是单线程的语言

2. 同步任务和异步任务

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

4. EventLoop 的基本概念

5. 结合 EventLoop 分析输出的顺序

宏任务和微任务

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

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

API 接口案例

1. 案例需求

2. 主要的实现步骤

3. 搭建项目的基本结构

4. 创建基本的服务器

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

6. 创建 user_ctrl 模块

7. 创建 user_router 模块

8. 导入并挂载路由模块

9. 使用 try…catch 捕获异常


ES6 模块化

1、什么是 ES6 模块化规范

ES6 模块化规范 浏览器端 服务器端 通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学 习成本,开发者不需再额外学习 AMD、CMD 或 CommonJS 等模块化规范。
ES6 模块化规范中定义:
  •  每个 js 文件都是一个独立的模块
  •  导入其它模块成员使用 import 关键字
  •  向外共享模块成员使用 export 关键字

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

node.js 中 默认仅支持 CommonJS 模块化规范 ,若想基于 node.js 体验与学习 ES6 的模块化语法,可以按照
如下两个步骤进行配置:
① 确保安装了 v14.15.1 或更高版本的 node.js
② 在 package.json 的根节点中添加 "type": "module" 节点

3、ES6 模块化的基本语法

ES6 的模块化主要包含如下 3 种用法:
  1.  默认导出默认导入
  2.  按需导出按需导入
  3.  直接导入执行模块中的代码
默认导出的语法: export default 默认导出的成员
默认导入的语法: import 接收名称 from ' 模块标识符 '
每个模块中, 只允许使用唯一的一次 export default,否则会报错!
默认导入时的 接收名称 可以任意名称, 只要是合法的成员名称即可
按需导出的语法: export 按需导出的成员
按需导入的语法: import { s1 } from '模块标识符'

Promise

1. 回调地狱

多层回调函数的相互嵌套 ,就形成了 回调地狱
为了解决回调地狱的问题, ES6 (ECMAScript 2015)中新增了 Promise 的概念。

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

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

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

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

4.1 then-fs 的基本使用

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

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

4.2 .then() 方法的特性

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

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

Promise 支持链式调用 ,从而来解决回调地狱的问题。示例代码如下:
import thenFs from 'then-fs'thenFs.readFile('./files/1.txt', 'utf8').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)})

4.4 通过 .catch 捕获错误

.catch((err) => {console.log(err.message)})
如果不希望前面的错误导致后续的 .then 无法正常执行,则 可以将 .catch 的调用提前

4.5 Promise.all() 方法

Promise.all() 方法会发起并行的 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.all(promiseArr).then(result => {console.log(result)
})

4.6 Promise.race() 方法

Promise.race() 方法会发起并行的 Promise 异步操作, 只要任何一个异步操作完成,就立即执行下一步的 .then 操作 (赛跑机制)。示例代码如下:
Promise.race(promiseArr).then(result => {console.log(result)
})

5. 基于 Promise 封装读文件的方法

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

1 getFile 方法的基本定义

function getFile(fpath) {
return new Promise
}

2 创建具体的异步操作

如果想要创建 具体的异步操作 ,则需要在 new Promise() 构造函数期间, 传递一个 function 函数 将具体的 异步操作定义到 function 函数内部
function getFile(fpath) {return new Promise(function () {fs.readFile(fpath, 'utf8', (err, dataStr) => {})})
}

3 获取 .then 的两个实参

通过 .then() 指定的成功失败的回调函数,可以在 function 的形参中进行接收,

4 调用 resolve 和 reject 回调函数

Promise 异步操作的结果,可以调用 resolve reject 回调函数进行处理。

import fs from 'fs'function getFile(fpath) {return new Promise(function (resolve, reject) {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))

async/await

1. 什么是 async/await

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

2. async/await 的基本使用

import thenFs from 'then-fs'async function getAllFile() {const r1 = await thenFs.readFile('./files/1.txt', 'utf8')console.log(r1)
}getAllFile()

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

  1. 如果在 function 中使用了 await,则 function 必须被 async 修饰
  2. 在 async 方法中,第一个 await 之前的代码会同步执行,await 之后的代码会异步执行
    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  
    B111、、
    D
    

EventLoop

1. JavaScript 是单线程的语言

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

单线程执行任务队列的问题:
如果 前一个任务非常耗时 ,则后续的任务就不得不一直等待,从而导致 程序假死 的问题。

2. 同步任务和异步任务

为了防止某个 耗时任务 导致 程序假死 的问题,JavaScript 把待执行的任务分为了两类:
同步任务 (synchronous)
  •  又叫做非耗时任务,指的是在主线程上排队执行的那些任务
  •  只有前一个任务执行完毕,才能执行后一个任务
异步任务(asynchronous)
  •  又叫做耗时任务,异步任务由 JavaScript 委托给宿主环境进行执行
  •  当异步任务执行完成后,会通知 JavaScript 主线程执行异步任务的回调函数

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

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

4. EventLoop 的基本概念

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

5. 结合 EventLoop 分析输出的顺序

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

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

宏任务和微任务

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

JavaScript 把异步任务又做了进一步的划分,异步任务又分为两类,分别是:
① 宏任务 (macrotask)
  •  异步 Ajax 请求、
  •  setTimeout、setInterval、
  •  文件操作
  •  其它宏任务
② 微任务 (microtask)
  •  Promise.then、.catch 和 .finally
  •  process.nextTick
  •  其它微任务

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

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

API 接口案例

1. 案例需求

基于 MySQL 数据库 + Express 对外提供 用户列表 的 API 接口服务。用到的技术点如下:
  •  第三方包 express 和 mysql2
  •  ES6 模块化
  •  Promise
  •  async/await

2. 主要的实现步骤

  1.  搭建项目的基本结构
  2.  创建基本的服务器
  3.  创建 db 数据库操作模块
  4.  创建 user_ctrl 业务模块
  5.  创建 user_router 路由模块

3. 搭建项目的基本结构

① 启用 ES6 模块化支持
  •  在 package.json 中声明 "type": "module"
② 安装第三方依赖包
  •  运行 npm install express@4.17.1 mysql2@2.2.5

4. 创建基本的服务器

import express from 'express'const app = express()app.listen(80, () =>{console.log('serve run 127.0.0.1')
})

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

数据库中必须有数据

import mysql from 'mysql2'const pool = mysql.createPool({host: '127.0.0.1',port: '3306',database: 'test',user: 'root',password: '123456',
})export default pool.promise()

6. 创建 user_ctrl 模块

import db from '../db/index.js'export async function getAllUser(req, res){const [rows] = await db.query('select id, username, password from user' )console.log(rows)res.send({status: 0,message: '获取用户成功',data: rows,})
}

7. 创建 user_router 模块

import express from 'express'
import { getAllUser } from '../controller/user_ctrl.js'const router = new express.Router()
router.get('/user', getAllUser)export default router

8. 导入并挂载路由模块

import express from 'express'
import userRouter  from './router/user_router.js'const app = express()app.use('/api', userRouter)app.listen(80, () =>{console.log('serve run 127.0.0.1')
})

9. 使用 try…catch 捕获异常

import db from '../db/index.js'export async function getAllUser(req, res){
try {const [rows] = await db.query('select id, username, password from user' )console.log(rows)res.send({status: 0,message: '获取用户成功',data: rows,})
}catch(err){res.send({status: 1,message: '获取用户失败',desc: err.message,})
}
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/5359.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ZooKeeper原理剖析

1.ZooKeeper简介 ZooKeeper是一个分布式、高可用性的协调服务。在大数据产品中主要提供两个功能: 帮助系统避免单点故障,建立可靠的应用程序。提供分布式协作服务和维护配置信息。 2.ZooKeeper结构 ZooKeeper集群中的节点分为三种角色:Le…

SSH客户端连接远程服务器

目录 一、什么是客户端连接远程服务器 二、什么是服务端连接远程服务器 三、查看网络信息 1、图形程序查看网络信息 2、命令查看网络信息 四、SSH客户端(Linux) 五、SSH客户端(windows) 六、SSH远程服务器 一、什么是客户…

75、简述你对RPC、RMI的理解

简述你对RPC、RMI的理解 RPC:在本地调用远程的函数,远程过程调用,可以跨语言实现 httpClient RMI:远程方法调用,java中用于实现RPC的一种机制,RPC的java版本,是J2EE的网络调用机制&#xff0c…

git如何撤销commit(未push)

文章目录 前言undo commitreset current branch to here Undo Commit,Revert Commit,Drop Commit的区别 是否删除对代码的修改是否删除Commit记录是否会新增Commit记录Undo Commit不会未Push会,已Push不会不会Revert Commit会不会会Drop Com…

jQuery.print打印插件的使用方法

网站新闻内容页面,想只打印新闻内容区域,其他区域不打印,使用了jQuery.print插件,插件下载地址:GitHub - DoersGuild/jQuery.print: Easy to use, Element Printing Plugin for jQuery 插件下载地址:https:…

vue 3.0 如何加载图片

.logo { background: url(~/assets/images/logo.svg) no-repeat center center/contain; width: 117px; height: 24px; margin: 0 20px; } <a class"logo" href"#"></a> 比较实用的书写方式

汽车销售数据可视化分析实战

1、任务 市场需求&#xff1a;各年度汽车总销量及环比&#xff0c;各车类、级别车辆销量及环比 消费能力/价位认知&#xff1a;车辆销售规模及环比、不同价位车销量及环比 企业/品牌竞争&#xff1a;各车系、厂商、品牌车销量及环比&#xff0c;市占率及变化趋势 热销车型&…

OBS 基础 之 使用到的坐标体系 及转换

目录 一、画布坐标 1、画布宽高 2、设置LOGO位置 二、预览窗口坐标

python多线程排查

问题 公司服务总是莫名其妙的cpu饱满排查了代码中的定时任务&#xff0c;排除之后仍经常出现类似问题。是时候debug了 排查过程 cpu劣化是一个过程&#xff0c;cpu持续增长到60%&#xff0c;然后突然服务雪崩不服务了。排查下来看sleep的物理线程和cpu增长的幅度一致 那么…

【Rust 基础篇】Rust 多线程:并发编程的艺术

导言 多线程是现代计算机编程中的重要概念&#xff0c;它允许程序同时执行多个任务&#xff0c;充分利用多核处理器的性能优势。在 Rust 中&#xff0c;多线程编程也得到了很好的支持&#xff0c;通过标准库提供的 std::thread 模块可以方便地创建和管理线程。本篇博客将详细介…

vue3+pinia的使用,刷新后不丢数据

前言&#xff1a; 好用的状态管理器&#xff0c;vue3中出来的pinia&#xff0c;相比较vuex来说&#xff0c;更加轻便&#xff0c;使用也更方便。 官方文档&#xff1a;点我 github地址&#xff1a;点我 pinia与vuex相比较优点&#xff1a; pinia 是轻量级状态管理工具&#x…

hadoop安全保护机制(kerberos + ldap)

信息安全理论&#xff1a; CIA模型&#xff1a;机密性、完整性和可用性 CIA模型能够帮助建议一些信息安全原则&#xff0c;但该模型并不是一个需要严格遵守的规则 hadoop平台可能设计多个CIA模型组件&#xff0c;也kennel一个也不涉及 机密性&#xff1a; 信息只应该被期望的…

探索AI图像安全,助力可信AI发展

探索AI图像安全&#xff0c;助力可信AI发展 0. 前言1. 人工智能发展与安全挑战1.1 人工智能及其发展1.2 人工智能安全挑战 2. WAIC 2023 多模态基础大模型的可信 AI2.1 WAIC 2023 专题论坛2.2 走进合合信息 3. AI 图像安全3.1 图像篡改检测3.2 生成式图像鉴别3.3 OCR 对抗攻击技…

Vis相关的期刊会议

中国计算机学会推荐国际学术会议和期刊目录 文档&#xff0c; 下载 link&#xff1a;CCF推荐国际学术刊物目录-中国计算机学会 一.可视化方向文章 1.IEEE VIS&#xff0c;是由 IEEE Visualization and Graphics Technical Committee(VGTC) 主办的数据可视化领域的顶级会议&a…

LeetCode_模拟_中等_874.模拟行走机器人

目录 1.题目2.思路3.代码实现&#xff08;Java&#xff09; 1.题目 机器人在一个无限大小的 XY 网格平面上行走&#xff0c;从点 (0, 0) 处开始出发&#xff0c;面向北方。该机器人可以接收以下三种类型的命令 commands &#xff1a; -2 &#xff1a;向左转 90 度-1 &#xf…

【计算机视觉 | 目标检测 | 图像分割】arxiv 计算机视觉关于目标检测和图像分割的学术速递(7 月 17 日论文合集)

文章目录 一、检测相关(5篇)1.1 TALL: Thumbnail Layout for Deepfake Video Detection1.2 Cloud Detection in Multispectral Satellite Images Using Support Vector Machines With Quantum Kernels1.3 Multimodal Motion Conditioned Diffusion Model for Skeleton-based Vi…

【Linux】自动化构建工具-make/Makefile详解

前言 大家好吖&#xff0c;欢迎来到 YY 滴 Linux系列 &#xff0c;热烈欢迎&#xff01;本章主要内容面向接触过Linux的老铁&#xff0c;主要内容含 欢迎订阅 YY 滴Linux专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; 订阅专栏阅读&#xff1a;YY的《…

深度学习——LSTM解决分类问题

RNN基本介绍 概述 循环神经网络&#xff08;Recurrent Neural Network&#xff0c;RNN&#xff09;是一种深度学习模型&#xff0c;主要用于处理序列数据&#xff0c;如文本、语音、时间序列等具有时序关系的数据。 核心思想 RNN的关键思想是引入了循环结构&#xff0c;允许…

7.21一日总结

1.redux中action传参 a.传参 在时间中,第二个参数就是传递的值,num就是传递的参数 onClick{()>{store.dispatch({type:del,num:1})}} b.接收参数 const reducer function (state { ...data }, action) {switch (action.type) {case "del":console.log(action.n…

什么是剪贴板劫持-剪贴板劫持教程

目录 前言 什么是剪贴板劫持如何避免剪贴板劫持&#xff1f;如何执行剪贴板劫持&#xff1f; 总结 前言 我来写剪贴板劫持教程。 什么是剪贴板劫持 剪贴板劫持是一种危险的攻击技术&#xff0c;借助该攻击者可以控制受害者的剪贴板并将恶意代码粘贴到目标机器中&#xff0c;…