基于es6的promise的使用

文章目录

• 前言
• 一、模块的导入和导出？
• • 1.默认导入和导出
  • 2.按需导入和导出
• 二、promise是什么？
• • 1.回调地狱
  • 2.Promise
• 三、EventLoop
• • 1.同步任务和异步任务
  • 2.同步任务和异步任务的执行过程
• 四、宏任务和微任务

---

前言

基于es6模块的按需导入和导出，本文介绍了promise构造函数，同步任务和异步任务的执行机制，以及宏任务和微任务的执行顺序

---

一、模块的导入和导出？

概述： promise是一个构造函数，用来解决回调地狱的现象。

1.默认导入和导出

• 语法：
• 导出：export default { 对象}
• 导入：import m1 from './01.默认导出.js';
  

2.按需导入和导出

• 语法：
• 导出：export 对象
• 导入：import {m1 } from './...导出.js';
  

二、promise是什么？

概述： promise是一个构造函数，用来解决回调地狱的现象。

1.回调地狱

多层回调函数嵌套，就造成了回调地狱的现象，如图所示：

2.Promise

1. 创建promise实例 ：const p = new Promise();
2. promise.prototype原型链上的.then()方法：用来预先指定成功和失败的回调函数 p.then(result=>{},error=>{});
3. all和 race

import fs from 'then-fs';

const proAll = [
    fs.readFile('./files/1.txt','utf8'),
    fs.readFile('./files/2.txt','utf8'),
];

// 1.all: 保证多个任务都执行成功后 才调用then中的函数
Promise.all(proAll).then(result =>{
    console.log(result);
});

// 2.race: 捕获最先执行完的那个
Promise.race(proAll).then(result =>{
    console.log(result);
});

4. await和async

import thenfs from 'then-fs';

// await/async 关键字 可以将then语法改成赋值语法
async function getall() {
    // 读取文件1
    const r1 = await thenfs.readFile('./files/1.txt', 'utf8')
    console.log(r1);
    // 读取文件2
    const r2 = await thenfs.readFile('./files/2.txt', 'utf8')
    console.log(r2);
}

getall()

三、EventLoop

1.同步任务和异步任务

为了防止某个耗时任务导致程序假死的问题, Javascript把待执行的任务分为了两类:

同步任务(synchronous)

• 也叫做非耗时任务 ,指的是在主线程上排队执行的那些任务。
• 只有前一个任务执行完毕,才能执行后一个任务。

异步任务(asynchronous)

• 又叫做耗时任务 ,异步任务由JavaScript委托给宿主环境（浏览器或者nodejs环境）进行执行。
• 当异步任务执行完成后,会通知Javascript主线程 执行异步任务的回调函数 。

2.同步任务和异步任务的执行过程

测试代码如下：

import thenFs form 'then-fs';
console.log('A');
thenFs.readFile('./files/1.txt','utf8').then(dataStr =>{
	console.log('B');
});
setTimeout(()=>{
	console.log('C');
},0);
console.log('D');

//运行结果：ADCB
//解析：A和D属于同步任务，主线程会先根据代码的先后顺序执行，然后执行异步任务

四、宏任务和微任务

每一个宏任务执行完之后,都会检查是否存在待执行的微任务。宏任务可以理解为是执行步骤复杂的异步任务，微任务可以理解为执行起来较为快的同步任务。

测试代码如下：

setTimeout(()=>{
	console.log('1');
});
new Promise(resolve=>{
	console.log('2');
	resolve();
}).then(()=>{
	console.log('3');
});
console.log('4');

//运行结果2431
//new  promise是同步任务，打印语句是微任务，计时器是宏任务，所以执行顺序为：
//1.先执行同步任务，输出2和4
//2.执行微任务，输出3
//3.执行宏任务，输出1

---