ES6模块化、Promise、async、await、EventLoop、API接口案例 |
您所在的位置：网站首页 › es6特性总结 › ES6模块化、Promise、async、await、EventLoop、API接口案例 |
ES6模块化、Promise、async、await、EventLoop、API接口案例
|
文章目录
一、ES6模块化与异步编程1、ES6模块化模块化基础了解什么是ES6模块化规范ES6模块化的基本语法1、默认导出:2、默认导入:3、默认导出的注意事项:4、默认导入的注意事项:5、按需导出:6、按需导入:7、按需导入与按需导出的注意事项:8、直接导入并执行模块中的代码:
2、Promise1、回调地狱:2、如何解决回调地狱的问题:3、Promise的基本概念:4 、基于回调函数按顺序读取文件内容:5 、基于then-fs读取文件内容:6 、.then()方法的特性和基于Promise按顺序读取文件的内容:
3、async/await4、EventLoop5、API接口案例
总结还在努力生活写作中
一、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 文件名–运行文件 每个模块中，只允许使用唯一的一次export default，否则会报错！以下举了个错误案例！！！ 默认导入时可以是任意名称，只要是合法的成员名称即可。以下举了个错误案例！！！ 按需导出的语法: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}按需导出和按需导入 
8、直接导入并执行模块中的代码:
如果只想单纯地执行某个模块中的代码，并不需要得到模块中向外共享的成员。此时，可以直接导入并执行模块底阿妈，实例代码如下： dcwj.js // 在当前模块执行一个for循环保存 for(let i=0;i // 第一层回调函数 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()
首先创建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是异步的，上面这种读法可以读取成功，顺序的话就无法保证了，需要进一步的优化改进！！！！
6 、.then()方法的特性和基于Promise按顺序读取文件的内容:
在升级上面代码之前，我们了解一下.then()方法 如果上一个.then()方法中返回一个新的Promise实例对象，则可以通过下一个.then()继续进行处理。通过.then()方法的链式调用，就解决了回调地狱的问题。Promise文件支持链式一调用。 jypromise.js import thenFs from 'then-fs' // 引入then-fs thenFs.readFile('./fiie/1.txt','utf8').then( // 返回一个Promise实例 (r1)=>{ console.log(r1) return thenFs.readFile('./fiie/2.txt','utf8') // 在第一个.then中返回一个新的Promise实例 } ).then(r2=>{ // 继续调用.then为上一个.then的返回的新的Promise实例指定成功之后热回调函数 console.log(r2) return thenFs.readFile('./fiie/3.txt','utf8') // 在第二个.then中再返回一个新的Promise实例 }).then(r3=>{ // 继续调用.then为上一个.then的返回的新的Promise实例指定成功之后热回调函数 console.log(r3) })这样就实现了顺序读取文件，上一个return里面返回了一个新的promise实例对象，那就可以继续通过.then来指定成功的回调函数，这样就解决了对于回调的问题和顺序读取文件 如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！ 👨🔧 个人主页 : 前端初见 |
readtxt.js
【本文地址】