ES6模块化与异步编程

63 阅读4分钟

学习目标:

1.在node.js 中体验es6的模块化语法

  1. 检查node.js的版本 要求至少14.1以上
  2. 在package.json 中添加 type:module

导出语法

let n1=1;
let n2=2;


function show(){
  console.log(123);
}


export default{
  n1,
  n2,
  show
}

导入语法:

import m1 from './'

注意事项 只能导出一次 命名合法

按需导出

export let m1=1
export let m2=2


export function show(){
  console.log('123');
}

按需导入

import {m1,m2 as n1,show} from './index.js'


console.log(m1);
console.log(n1);
console.log(show());

注意事项 按需导入和默认导入可以配合使用 可以使用as对导入成员进行命名

2.Promise

npm install then-fs

2.1then-fs的使用方法

import thenfs from 'then-fs'


thenfs.readFile('./text1','utf8').then((r1)=>{console.log(r1);})
thenfs.readFile('./text2','utf8').then((r1)=>{console.log(r1);})

此方法不能保证文件读取顺序,需要进行改进

promise 支持链式调用,来解决回调地狱问题

import thenfs from 'then-fs'


// thenfs.readFile('./text1','utf8').then((r1)=>{console.log(r1);})
// thenfs.readFile('./text2','utf8').then((r1)=>{console.log(r1);})



thenfs.readFile('./text1', 'utf8').then((r1) => {
  console.log(r1);
  return thenfs.readFile('./text2', 'utf8')
}).then((r2) => {
  console.log(r2);
  return thenfs.readFile('./text3', 'utf8')
}).then((r3)=>{
  console.log(r3);
})

使用catch

可以捕获后面的错误

如果不希望chtch错误影响整个代码,我们可以把catch往前提

thenfs.readFile('./text13', 'utf8').catch((err) => {
  // 返回错误信息
  console.log(err);
}).then((r1) => {
  console.log(r1);
  return thenfs.readFile('./text2', 'utf8')
}).then((r2) => {
  console.log(r2);
  return thenfs.readFile('./text3', 'utf8')
}).then((r3) => {
  console.log(r3);
})

2.2.promise中all()方法

promise中all()方法会发起并行的Promise异步操作,等所有的异步操作全部结束后才会执行下一步 .then操作(等待机制)

const PromiseisArr=[
  thenfs.readFile('./text1','utf8'),
  thenfs.readFile('./text2','utf8'),
  thenfs.readFile('./text3','utf8'),
]


Promise.all(PromiseisArr).then((r1)=>{
    r1.forEach((item)=>{
      console.log(item);
    })
}).catch(err=>{console.log(err);})

等数组中的操作全部执行完后,才会执行下一步操作

2.3Promise中race()方法

Promise中race()方法 , 只要以一个异步操作完成,就会立即执行下一个异步操作

const PromiseisArr=[
  thenfs.readFile('./text1','utf8'),
  thenfs.readFile('./text2','utf8'),
  thenfs.readFile('./text3','utf8'),
]


Promise.race(PromiseisArr).then((r1)=>{
   console.log(r1);
}).catch(err=>{console.log(err);})

2.4基于Promise创建一个异步操作

import fs from 'fs'


function getFile(fpath){
   return new Promise(function(){
     fs.readFile(fpath,'utf8',(err,data)=>{
      console.log(data);
     })
   })
}
getFile('./text3')

基于Promise异步读取文件方法

// 基于Promise创建一个异步操作
import fs from 'fs'



function getFile(fpath){
   return new Promise(function(resolve,reject){
     fs.readFile(fpath,'utf8',(err,data)=>{
      if(err){
        reject(err)
      }else{
        resolve(data)
      }
     })
   })
}
getFile('./text3').then((res)=>{
  console.log(res);
},(reson)=>{
  console.log(reson);
})
// 基于Promise创建一个异步操作
import fs from 'fs'



function getFile(fpath){
   return new Promise(function(resolve,reject){
     fs.readFile(fpath,'utf8',(err,data)=>{
      if(err){
        reject(err)
      }else{
        resolve(data)
      }
     })
   })
}


getFile('./text3').then((res)=>{
  console.log(res);
}).catch(err=>{
  console.log(err);
})

3.什么是async和await

用来简化Promise代码

1.1async和await的基本使用

import thenfs from 'then-fs'


async function getdata () {
  let f1 =await thenfs.readFile('./text1', 'utf8')
  console.log(f1);
  let f2 =await thenfs.readFile('./text2','utf8')
  console.log(f2);
}
getdata()

注意事项:

在function中使用async,function里面必须有await修饰

在async方法中,第一个await之前的代码会同步执行,await之后的代码会异步执行

4.Eventloop同步任务和异步任务

1.JavaScript是一个单线程任务,一次只能执行一个任务 前一个任务执行完才能执行后一个任务

JavaScript把执行的任务分为同步任务和异步任务

同步任务与异步任务执行过程

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

eventloop执行过程概念

eventloop经典面试题

AD属于同步任务 按照次序执行

BC属于异步任务,被委托到宿主环境中 因为C只需要0 所以C先执行

5.宏任务与微任务

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

JavaScript把异步任务分为宏任务与微任务

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

先执行宏任务,执行完成后检查是否有微任务,如果有则执行所有微任务,如果没有继续执行宏任务 重复上述步骤

注:Promise本身是同步任务 里面的then()和catch ()是微任务

试题1,2

2431

script本身属于宏任务。所以执行完script脚本,会清空这一次添加的微任务。
后面就是 宏-微-宏-微 了。

试题3

6.API接口案例

1.搭建项目的基本结构

1.链接数据库

import mysql from 'mysql'


const pool=mysql.createPool({
  host:'127.0.0.1',
  port:3306,
  database:'root',
  password:'123456'
})


export default pool.promise()

2.创建express服务器

//1.导入express
import express from 'express'
//2.创建web服务器
const app = express()
//3.启动web服务器
app.listen(80, () => {
    console.log('express server running at http://127.0.0.1')
})

3.查询mysql数据

import db from '../db/mysql'


function getAlluser(req,res){
  const [rows] = db.query('select id from ev_users')
  console.log(rows);
}


getAlluser()

目录: