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

2401_84434086

于 2024-06-19 10:52:52 发布

阅读量613

点赞数 18

文章标签： es6 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/2401_84434086/article/details/139796431

版权

确保电脑上安装了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.js'
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

在这里插入图片描述

1、回调地狱:

多层回调函数的相互嵌套，就形成了回调地狱。代码如下
hddy.js

setTimeout(() => {
  // 第一层回调函数
  console.log("1秒后输出");
  setTimeout(() => {
    // 第二层回调函数
    console.log("2秒后输出");
    setTimeout(() => {
      // 第三层回调函数
      console.log("3秒后输出");
    }, 3000);
  }, 2000);
}, 1000);

回调地狱的缺点：

代码耦合性太强，牵一发而动全身，难以维护
大量冗余的代码相互嵌套，代码的可读性变差

2、如何解决回调地狱的问题:

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

3、Promise的基本概念:

Promise是一个构造函数
- 我们可以创建Promise的实例 const p = new Promise()
- new出来的Promise实例对象，代表一个异步操作
Promise.prototype原型对象上包含一个.then()方法
- 每一次new Promise()构造函数得到的s实例对象，都可以通过原型链的方式访问到.then()方法，例如p.then()

在这里插入图片描述

.then()方法用来预先指定成功和失败的回调函数
- p.then(成功的回调函数，失败的回调函数)
- p.then(result=>{},error=>{})
- 调用.then()方法时，成功的回调函数是必选的，失败的回调函数是可选的

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

首先创建3个txt文件，对于每个文件来说，里面都放一段不同的文本，接下来，我们就通过回调函数的方式顺序读取文件的内容。
在这里插入图片描述
readtxt.js

// readFile 第一个参数./fiie/1.txt是读取文件的路径 第二个参数utf-8是文件的编码 第三个参数是一个回调函数(第一个是失败的回调，第二个是成功的回调)
fs.readFile('./fiie/1.txt','utf-8',(err1,r1=>{
  // 读取文件 1.txt
  if(err1) return console.log(err1.message)
  // 读取1.txt文件失败
  console.log(r1)
  // 读取1.txt文件成功
  fs.readFile('./fiie/2.txt','utf-8',(err2,r2=>{
      // 读取文件 2.txt
    if(err2) return console.log(err2.message)
    // 读取2.txt文件失败
    console.log(r2)
    // 读2.txt文件成功
    fs.readFile('./fiie/3.txt','utf-8',(err3,r3=>{
      // 读取文件 3.txt
    if(err3) return console.log(err3.message)
    // 读取3.txt文件失败
    console.log(r3)
    // 读取3.txt文件成功
  }))
  }))
}))

以上打码在读取文件顺序的时候就形成了一个回调地狱的问题，虽然可以正常顺序的读取文件，因为代码嵌套了几个回调，虽然能运行，但是写起来太麻烦，可读性也差，也产生了回调地狱。

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

在这里插入图片描述

为了解决上面代码产生的问题，所以提供了一个新的方案。基于then-fs的包来读取文件

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

npm install then-fs

在这里插入图片描述

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

   // then-fs.js
  // 基于Promise的方式读取文件
  import thenFs from 'then-fs'
  // 引入then-fs
  thenFs.readFile('./fiie/1.txt','utf8').then(r1=>{console.log(r1)},err1=>{console.log(err1.message)})
  // r1成功的回调 err1失败的回调
  thenFs.readFile('./fiie/2.txt','utf8').then(r1=>{console.log(r1)},err1=>{console.log(err1.message)})
  thenFs.readFile('./fiie/3.txt','utf8').then(r1=>{console.log(r1)},err1=>{console.log(err1.message)})

在这里插入图片描述
左侧是读取结果
上面的代码无法保证文件的读取顺序，因为readFiie是异步的，上面这种读法可以读取成功，顺序的话就无法保证了，需要进一步的优化改进！！！！