首页 > 其他分享 >es6模块化-cnblog

es6模块化-cnblog

时间:2023-02-04 11:36:37浏览次数:48  
标签:files es6 console log err 模块化 thenFs txt cnblog

es6模块化

1. 设置es6的模板规范

  • package.json中配置
  • node.js默认支持commonjs规范
  • 修改为es6规范
"type": "module",

2. 解构赋值来按需导入

2.1 按需导出和默认导出同时使用

  • 导出模块
// 按需导出

export let a1=10
export let a2=12

export function speak(){}

// 默认导出

export default {
  name:'az',
  age:19
}
  • 导入模块
// 默认导入用info来接收 
// 按需导入使用解构赋值
// 使用as来进行重命名
import info,{a1 as a,a2 as b,speak} from "./01.按需导出和默认导出.js"


console.log(a);
console.log(b);
console.log(speak);
console.log(info);
  • 效果图

3. 回调函数

3.1 回调地狱

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

3.2 使用promise解决

promise是一个构造函数

  • 创建promise实例:const p=new promise()
  • new 出来的promise对象,代表一个异步操作

promise的原型对象

  • .then方法:通过原型链的方式获取到

.then方法用来预先指定成功或失败的回调函数

  • 例如:p.then(result=>{},error=>{})
  • 成功的回调函数不可省略

3.3 基于回调函数来读取文件

  • 因为node.js不支持promise的.then回调函数
  • 使用自身的回调函数
import fs from 'fs'

fs.readFile("./files/1.txt","utf8",(r1,err)=>{
  if(r1){
    console.log(r1);
  }else{
    console.log(err);
  }
})

fs.readFile("./files/2.txt","utf8",(r2,err)=>{
  if(r2){
    console.log(r2);
  }else{
    console.log(err);
  }
})

fs.readFile("./files/3.txt","utf8",(r3,err)=>{
  if(r3){
    console.log(r3);
  }else{
    console.log(err);
  }
})
  • 缺点:不能控制执行顺序(虽然没有回调地狱的问题)

3.4 使用then-fs的包来支持promise回调

  • .then方法调用后返回一个promise对象
  • 只要是promise对象就可以调用.then方法,从而实现链式调用
  • 解决了回调地狱的问题,也解决了不能按顺序执行的问题

// 导入then-fs这个包

import thenFs from 'then-fs'

// 支持链式.then的方法实现

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);
  })
})

3.5 使用promise中原型中的.catch方法捕获错误

  • 放在最后,从那里捕获,那里以后的then不执行

// 导入then-fs这个包

import thenFs from 'then-fs'

// 支持链式.then的方法实现

thenFs.readFile('./files/111.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);
  })

  .catch(err=>{
    console.log(err.message);
  })

  • 效果图

  • 将catch提前,不影响之后的then

// 导入then-fs这个包

import thenFs from 'then-fs'

// 支持链式.then的方法实现

thenFs.readFile('./files/111.txt','utf8')

  .then(r1=>{
  console.log(r1);
  return thenFs.readFile('./files/2.txt','utf8')
  })

  .catch(err=>{
    console.log(err.message);
  })

  
  
  .then(r2=>{
    console.log(r2);
    return thenFs.readFile('./files/3.txt','utf8')
  })

  .then(r3=>{
    console.log(r3);
  })

  • 效果图

3.6 promise.all()方法

  • 发起并行的异步操作,等所有异步操作全部完成才执行下一步的.then()方法
import thenFs from "then-fs";

// promise.all()方法并行执行,全部完成再.then

// 并行任务数组
const arr=[
  thenFs.readFile('./files/1.txt','utf8'),
  thenFs.readFile('./files/2.txt','utf8'),
  thenFs.readFile('./files/3.txt','utf8')
]

Promise.all(arr)
.then(res=>{
  console.log(res);
})

.catch(err=>{
  console.log(err.message);
})
  • 执行顺序为书写顺序

3.7 promise.race()方法

  • 并发任务,哪个最快完成哪个调用.then方法
import thenFs from "then-fs";

// promise.all()方法并行执行,全部完成再.then

// 并行任务数组
const arr=[
  thenFs.readFile('./files/1.txt','utf8'),
  thenFs.readFile('./files/2.txt','utf8'),
  thenFs.readFile('./files/3.txt','utf8')
]

Promise.race(arr)
.then(res=>{
  console.log(res);
})

.catch(err=>{
  console.log(err.message);
})
  • 效果图

3.8 在不使用第三方包的情况下使用promise对象的.then()方法

  • 自己封装一个函数,用于promise对象的使用

// 导入fs模块

import fs from 'fs';

// fpath代表文件路径
function getFile(fpath){
  // 创建一个promise实例,创建一个读文件的异步操作

  // 实例对象接收两个实参,resolve代表成功的回调函数,reject代表失败的回调函数
  return new Promise(function(resolve,reject){
    fs.readFile(fpath,'utf8',(err,data)=>{
      // 如果失败,调用失败的回调函数
      if(err){
        return reject(err)
      }

      resolve(data)
    })
  })
  
}

// 调用getFile

getFile('./files/1.txt')
.then(r1=>{
  console.log(r1);
},err=>{
  console.log(err.message);
})

标签:files,es6,console,log,err,模块化,thenFs,txt,cnblog
From: https://www.cnblogs.com/lingxin1123/p/17091144.html

相关文章

  • vue(八)头条项目-cnblog
    vue(八)头条项目1.项目结构根据vuecreatemy-toutiao创建项目勾选上router2.生成的项目中的view文件夹和compoent文件夹都是用于存放组件view中的组件是通过路由......
  • Vue(六)-cnblog
    Vue(六)1.前端路由hash值与组件之间的对应关系hash值代表url地址中#号后面的内容,不同的hash地址对应不同的组件图解1.2简易路由<template><divclass="ap......
  • 1、配置vue项目支持es6语法-cnblog
    一些注意点1、配置vue项目支持es6语法在package.json文件中新增type节点package.json{"type":"module",}2.Vuex的挂载Vue.use方法调用了一个install的......
  • vue3 与vue2的区别-cnblog
    vue3与vue2的区别1.template节点vue2只允许一个根节点vue3允许多个根节点2.创建工具vue3:使用vite,也可使用vue-clivue2:使用vue-clivite创建3.调试工......
  • vue入门(二)-cnblog
    vue入门(二)1.过滤器一个函数在插值表达式中使用,对插值的值进行再处理{{username|toUpCase}}示例<!DOCTYPEhtml><htmllang="en"><head><metacharset......
  • vue入门(一)-cnblog
    vue入门(一)1.什么是vue一个框架(现有的解决方案)构造用户界面(操作html页面的内容)2.vue的特性数据驱动视图页面所依赖的数据发生变化时,vue会监听数据的变化,重新......
  • VUE学习笔记DAY01-cnblog
    webpack的使用(配合ppt)1.webpack前端工程化的具体解决方案作用代码压缩混淆处理浏览器端的JavaScript兼容性性能优化1.1基于webpack实现隔行变色npmij......
  • Vue(四)-cnblog
    Vue(四)1.生命周期一个组件从(创建->运行->销毁的整个阶段)生命周期函数:vue框架的内置函数,会随着组件的生命周期,自动按次序执行注意点生命周期强调整个时间段......
  • Vue(三) (Vue-cli)-cnblog
    Vue(三)(Vue-cli)1.单页面应用程序(SPA)一个web网站只有唯一的html页面2.vue-cli简化了webpack创建工程化Vue项目的全过程不需要自己去配置webpack,只需专心写页面2.......
  • Node.js学习第四天-cnblog
    Node.js学习第四天1.基本使用安装[email protected]创建最基本的web服务器constexpress=require('express')constapp=express()app.listen(80,()=>{......