【铺垫知识】黑马程序员 Vue 学习笔记

原创

已于 2022-02-07 14:25:30 修改 · 4.8k 阅读

41 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #es6

于 2021-08-10 19:10:06 首次发布

本文深入探讨了ES6的模块化机制，包括默认导出和按需导入等语法，并通过实例讲解了Promise解决回调地狱问题的方式，如then-fs读取文件内容。同时，介绍了async/await的使用方法及其注意事项，以及宏任务和微任务的执行顺序。最后，通过一个基于MySQL数据库和Express的API接口案例，展示了如何在实际项目中应用这些技术。

文章目录

ES6模块化
Promise
async / await
宏任务和微任务
- 1. 什么是宏任务和微任务
- 2. 宏任务和微任务的执行顺序
API接口案例
目标

ES6模块化

1. 回顾 node.js 中如何实现模块化

node.js 遵循了 CommonJS 的模块化规范。其中：

导入其他模块使用 require () 方法
模块对外共享成员使用 module.exports 对象

模块化的好处：
大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块之间的相互调用，利人利己

2. 前端模块化规范的分类

在 ES6 模块化规范诞生前，有其他如 AMD 、 CMD 、 CommonJS 模块化规范。但这些都不是官方的，还是存在一定的差异性和局限性

例如：
AMD 和 CMD 适用于浏览器端的 JavaScript 模块化
CommonJS 适用于服务器端的 JavaScript 模块化

为了降低学习难度和开发成本，统一的 ES6 模块化就诞生了！

3. 什么是 ES6 模块化规范

ES6 模块化规范中定义：

每个 JS 文件都是一个独立的模块
要导入模块使用 import 关键字
向外共享模块使用 export 关键字

4. ES6模块化的基本语法

主要包含以下三种用法

默认导出和默认导入
按需导出和按需导入
直接导入并执行模块中的代码

4.1 默认导出

语法：export default 默认导出的成员

let n1 = 10
let n2 = 20
function show () {
   
   }

// 向外共享对象
export default {
   
   
    n1,
    show
}

4.2 默认导入

语法：import 接收名称 from ’ 模块标识符 ’

import m1 from './1. 默认导出'

console.log(m1);

只能拿到 n1 和 show

4.3 按需导出和按需导入

按需导出 语法：emport 按需导出的成员

export let s1 = 'aaa'
export let s2 = 'ccc'
export function say() {
   
    }

按需导入 语法：import {s1} from ’ 模块标识符 ’

import {
   
    s1, s2, say } from "./3.按需导出";

Promise

1. 回调地狱

多层回调函数的相互嵌套，就形成了回调地狱。

setTimeout(() => {
   
      // 第一层
    console.log('延时一秒后输出');
    setTimeout(() => {
   
     //第二层
        console.log('再延时两秒输出');
        setTimeout(() => {
   
     //第三层
            console.log('再延时三秒');
        }, 3000)
    }, 2000)
}, 1000);

缺点：代码耦合性强，牵一发而动全身，难以维护

为解决这个问题，提出了 Promise 的概念

1.1 Promise的基本概念

① Promise 是一个构造函数

我们可以创建 Promise 的实例 const p = new Promise()
new 出来的 Promise 实例对象，代表一个异步操作

② Promise.prototype 上包含一个 .then() 方法

③ .then() 方法用来预先制定成功和失败的回调函数

p.then( 成功的回调函数，失败的回调函数 )
p.then( result => { } , error => { } )
成功的回调函数必选，失败的回调函数可选

1.2 then-fs 异步读取文件内容

调用 then-f 提供的 readFile() 方法，可以异步的读取文件的内容，它的返回值是 Promise 的实例对象。

因此可以调用 .then() 方法 为每个 Promise 异步操作制定成功和失败之后的回调函数。

import thenFs from 'then-fs'

// thenFs.readFile('./files/1.txt', 'utf8') 会拿到它的 Promise 对象
thenFs.readFile('./files/1.txt', 'utf8').then((r1) => {
   
    console.log(r1) })
thenFs.readFile('./files/2.txt'