ES6异步编排Promise与模块化

谁借莪１个温暖的怀抱￠ 2022-10-29 09:27 174阅读 0赞

### 文章目录 ###

*  一、Promise异步编排
 *   *  1.异步编排案例
     *  2.使用Promise优化
 *  二、模块化

--------------------

> 在 JavaScript 的世界中， 所有代码都是单线程执行的。 由于这个“缺陷”， 导致 JavaScript 的所有网络操作， 浏览器事件， 都必须是异步执行。 使用Promise可以解决这个问题。

# 一、Promise异步编排 #

## 1.异步编排案例 ##

> 案例需求： 用户登录， 并展示该用户的各科成绩。 在页面发送两次请求：
> 
> 1.  **查询用户， 查询成功说明可以登录。**
> 2.  **查询用户成功， 查询科目。**
> 3.  **根据科目的查询结果， 获取成绩。**
> 
> 分析： 此时后台应该提供三个接口， 一个提供`用户查询接口`， 一个提供`科目接口`， 一个提 供`各科成绩接口`， 为了渲染方便， 最好响应 json 数据。 在这里就不编写后台接口了， 而 是提供三个 json 文件， 直接提供 json 数据， 模拟后台接口：

user.json：
    	{ 
    	"id": 1,
    	"name": "zhangsan",
    	"password": "123456"
    	}
    	 
    	user_corse_1.json:
    	{ 
    	"id": 10,
    	"name": "chinese"
    	} 
    	
    	corse_score_10.json:
    	{ 
    	"id": 100,
    	"score": 90
    	}

不使用ES6实现：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_16_color_FFFFFF_t_70]

使用ES6实现：

## 2.使用Promise优化 ##

> 将Promise封装。
> 
>  *  用Promise封装异步操作。
>  *  用resolve将成功操作向下传递。
>  *  用reject将失败操作向下传递。

# 二、模块化 #

> 模块化是编写大型项目的基础，类似于Java中的导包，JS中没有导包的概念，取而代之的是模块化。
> 
>  *  export命令：用于规定模块的对外接口。
>  *  import命令：用于导入其他模块提供的功能。

准备三个JS文件，演示模块化的导入导出：

**hello.js**

export const util = { 
        sum(a, b) { 
            return a + b;
        }
    }
    
    // export不仅可以到处对象,一切JS变量都可以导出.比如基本类型变量,函数,数组,对象.
    // export{util}

**main.js**

import util from "./hello.js"
    import { name,age,add} from "./user.js"
    
    
    util.sum(1,2);
    console.log(name+age);
    add(1,3);

**user.js**

var name = "jack";
    var age = "21";
    function add(a,b){ 
        return a + b;
    }
    
    export{ name,age,add}

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzY5MTA1OA_size_16_color_FFFFFF_t_70]: /images/20221024/6ffd7a20cc234205af0f2c477f8e2e95.png