Vue3 ES6模块化语法与异步编程笔记

◆ 能够知道如何使用 ES6 的模块化语法

◆ 能够知道如何使用 Promise 解决回调地狱的问题

◆ 能够知道如何使用 async/await 简化 Promise 的调用

◆ 能够说出什么是 EventLoop

◆ 能够说出宏任务和微任务的执行顺序

一、ES6模块化语法

1. 回顾CommonJS：导入其它模块使用 require() 方法；模块对外共享成员使用module.exports 对象。

2. ES6 模块化规范中定义：

   每个 js 文件都是一个独立的模块

   导入其它模块成员使用 import 关键字

   向外共享模块成员使用 export 关键字

3. 在 node.js 中体验 ES6 模块化：

   ① 确保安装了 v14.15.1 或更高版本的 node.js

   ② 在 package.json 的根节点中添加 "type": "module" 节点

4.导入导出方式

1. 默认导入导出
    ---导出---
    export default {
        a,
        b
    }
    ----导入----
    import c for './export1.js'
    console.log(c) // { a:a ,b:b }
2. 按需导入导出
    ---导出---
    export let s1 = 10;
    export let s2 = 20;
    export function say(){ console.log(1) }
    ---导入---
    import {s1 as data ,say } from './export2.js'
    console.log(data) // 10
    say() // 1
3. 混合导入导出
    ---导入---
    import c ,{ s1, s2 } from './export3.js'
4. 直接导入并执行模块中的代码
    ---export4.js---
    for(let i = 0; i < 5; i++ ){
        ...
    }
    ---直接导入执行---
    import './export4.js'

二、异步编程

知识点：Promise,.then/.catch/.finally,Promise.all,Promise.race

    // catch在then之前，执行catch后还会执行then。catch在then之后，执行catch不会执行then
    import thenFs from 'then-fs'

    thenFs
      .readFile('./files/11.txt', 'utf8')
      .catch((err) => {
        console.log(err.message)
      })
      .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)
      })
  // Promise.all和Promise.race代码参数类型相同
    import thenFs from 'then-fs'

    const promiseArr = [
      thenFs.readFile('./files/3.txt', 'utf8'),
      thenFs.readFile('./files/2.txt', 'utf8'),
      thenFs.readFile('./files/1.txt', 'utf8'),
    ]

    Promise.race(promiseArr).then(result => {
      console.log(result)
    })
 // 创建Promise对象并使用
 import fs from 'fs'

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

    getFile('./files/11.txt')
      .then((r1) => {
        console.log(r1)
      })
      .catch((err) => console.log(err.message))
// async和await
    async function getAllFile() {
      console.log('B')
      const r1 = await thenFs.readFile('./files/1.txt', 'utf8')
      console.log(r1)
      const r2 = await thenFs.readFile('./files/2.txt', 'utf8')
      console.log(r2)
      const r3 = await thenFs.readFile('./files/3.txt', 'utf8')
      console.log(r3)
      console.log('D')
    }

三、EventLoop

JavaScript 主线程从“任务队列”中读取异步任务的回调函数，放到执行栈中依次执行。这个过程是循环不断的，所以整个的这种运行机制又称为 EventLoop（事件循环）。

四、宏任务和微任务

① 宏任务（macrotask）

⚫ 异步 Ajax 请求、

⚫ setTimeout、setInterval、

⚫ 文件操作

⚫ 其它宏任务

② 微任务（microtask）

⚫ Promise.then、.catch 和 .finally

⚫ process.nextTick

⚫ 其它微任务

五、API 接口案例

留坑后填！

引用：黑马程序员相关课程