ES6模块化、Promise、async、await、EventLoop、API接口案例_export function 与 await

复制代码
			+ [5、按需导出:](#5_111)
			+ [6、按需导入:](#6_122)
			+ [7、按需导入与按需导出的注意事项:](#7_136)
			+ [8、直接导入并执行模块中的代码:](#8_187)
	- [2、Promise](#2Promise_203)
	- * + [1、回调地狱:](#1_206)
			+ [2、如何解决回调地狱的问题:](#2_227)
			+ [3、Promise的基本概念:](#3Promise_230)
			+ [4 、基于回调函数按顺序读取文件内容:](#4__244)
			+ [5 、基于then-fs读取文件内容:](#5_thenfs_273)
			+ [6 、.then()方法的特性和基于Promise按顺序读取文件的内容:](#6_thenPromise_298)
	- [3、async/await](#3asyncawait_325)
	- [4、EventLoop](#4EventLoop_327)
	- [5、API接口案例](#5API_329)

一、ES6模块化与异步编程

1、ES6模块化
模块化基础了解

1、node中是如何实现模块化?

node遵循了CommonJS的模块化规范。

其中:

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

2、模块化的好处:

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

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

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

例如:

  • AMD和CMD适用于游览器端的JavaScript模块化
  • CommonJS适用于服务器端的JavaScript模块化

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

什么是ES6模块化规范

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

ES6
1、ES6模块化规范中定义:

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

2、在node中体验ES6模块化:

node中默认仅支持CommonJS模块化规范,若想基于node体验与学习ES6的模块化规范,可以按照如下俩个步骤进行配置:

  • 确保电脑上安装了v14.15.1或更高版本的node,因着在低版本node,他不支持使用和学习最新的ES6规范,版本低的话可以去node官网下载一下最新版本的node
    查看node版本

    node -v

  • 在package.json的根节点中添加"type":"module"节点
    快速初始化一个包管理文件

    npm init -y


package.json配置"type": "module"这样就可使用ES6规范了

复制代码
{
"type": "module",
"name": "es6",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
ES6模块化的基本语法

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

  • 默认导出与默认导入
  • 按需导出与按需导入
  • 直接导入并执行模块中的代码
1、默认导出:

默认导出的语法:export default 默认导出的成员,使用方法如下代码

dc.js

复制代码
let n1=10;
//定义模块私有成员n1
let n2=20
// 定义模块私有成员n2(外界访问不到n2,因为它没有被共享出去)
function show(){}; //定义模块化私有方法show

export default{
  //使用export default默认导出语法,向外共享n1和show俩成员
  m1,
  show
}
2、默认导入:

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

dr.js

复制代码
// 从dr.js模块导入dc模块中export default 向外共享的成员
// 并使用m1成员进行接受
import m1 from './dc'

console.log(m1)
// 打印输入的结果为
// {n1:10,show:{Function:show}}

node 文件名--运行文件

3、默认导出的注意事项:

每个模块中,只允许使用唯一的一次export default,否则会报错!以下举了个错误案例!!!

4、默认导入的注意事项:

默认导入时可以是任意名称,只要是合法的成员名称即可。以下举了个错误案例!!!

5、按需导出:

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

axdc.js

复制代码
// 向外按需导出变量s1
export let s1='aaa'
// 向外按需导出变量s2
export let s2='ccc'
// 向外按需导出方法say
export function say(){}
6、按需导入:

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

axdr.js

复制代码
import {s1,s2,say} from './axdc.js'
console.log(s1)
// 打印输入aaa
console.log(s2)
// 打印输入ccc
console.log(say)
// 打印输入{Function:say}

按需导出和按需导入

7、按需导入与按需导出的注意事项:
  • 每个模块中可以使用多次按需导出

    复制代码
    // 向外按需导出变量s1
    export let s1='aaa'
    // 向外按需导出变量s2
    export let s2='ccc'
    // 向外按需导出方法say
    export function say(){}
  • 按需导入的成员名称必须和按需导出的名称保持一致

    //和上方导出一致
    import {s1,s2,say} from './axdc.j

    真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
    详情关注公中号【编程进阶路】

    s'
    console.log(s1)
    // 打印输入aaa
    console.log(s2)
    // 打印输入ccc
    console.log(say)
    // 打印输入{Function:say}

  • 按需导入时,可以使用as关键字进行重命名

    import {s1,s2 as str2,say} from './axdc.js'
    console.log(str2)
    //输出ccc
    // 在想使用的s2的时候需要使用重名后的名字str2

  • 按需导入可以和默认导入一起使用
    axdc.js

    // 向外按需导出变量s1
    export let s1='aaa'
    // 向外按需导出变量s2
    export let s2='ccc'
    // 向外按需导出方法say
    export function say(){}
    let list=[]
    // 默认导出s1
    export default{
    list
    }

axdr.js

复制代码
// info默认导入的一个成员info
import info,{s1,s2 as str2,say} from './axdc.js'
console.log(info)
// 输出 { list: [] }
8、直接导入并执行模块中的代码:

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

dcwj.js

复制代码
// 在当前模块执行一个for循环保存
for(let i=0;i<3;i++){
  console.log(i)
}

zjdr.js

复制代码
// 直接导入并执行模块代码:不需要得到模块向外共享的成员
import './dcwj'
2、Promise

总结

技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。

:不需要得到模块向外共享的成员

import './dcwj'

复制代码
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ad3e96821f7d3e4ec483ba01fc384fe6.png#pic_center)


#### 2、Promise


![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d6309af5835fb5fb6f1ff5262a9d0f19.png#pic_center)


### 总结

>技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。



![](https://img-blog.csdnimg.cn/img_convert/778f48bbee0e3a1e35e129fb499f7475.webp?x-oss-process=image/format,png)
相关推荐
念2341 小时前
f5 shape分析
开发语言·javascript·ecmascript
難釋懷1 小时前
Vue混入
前端·javascript·vue.js
苍穹之跃1 小时前
某量JS逆向
开发语言·javascript·ecmascript
思茂信息1 小时前
CST软件如何进行参数化扫描?
运维·开发语言·javascript·windows·ecmascript·软件工程·软件需求
訾博ZiBo1 小时前
Vue3响应式高阶用法之toRaw()
javascript·vue.js·ecmascript
赈早见.琥珀猪1 小时前
vue启动ReferenceError: ReadableStream is not defined
开发语言·javascript·ecmascript
爱吃牛肉的大老虎1 小时前
JS异步中async、await讲解
开发语言·javascript·ecmascript
若梦plus1 小时前
TypeScript进阶
前端·javascript·typescript·ecmascript
直奔標竿1 小时前
Java开发者AI转型第二十七课!Spring AI 个人知识库实战(六)——全栈闭环收官,解锁前端流式渲染终极技巧
java·开发语言·前端·人工智能·后端·spring