谷粒商城实战笔记-34-前端基础-ES6-promise异步编排

文章目录

一，回调地狱（Callback Hell）
二，实战Promise
- 1，场景说明
- 2，回调地狱-传统实现
- 3，使用Promise重构
- - 3.1 用Promise实现上述需求
  - 3.2 进一步重构

在ES6中，Promise是一个用于异步编程的重要构造，它代表了一个最终可能完成或失败的异步操作，并且具有一个最终的值。

简单的说，Promise提供了一种新的异步调用的语法，让异步调用的语法更加简洁和容易理解。

接下里，我们将以一个例子深入浅出的说清楚Promise的来龙去脉。

一，回调地狱（Callback Hell）

回调地狱也被称为金字塔之痛（Pyramid of Doom），是在使用回调函数进行异步编程时遇到的一个常见问题。

在JavaScript中，回调函数经常被用来处理异步操作的结果，如网络请求、定时器、文件I/O等。

当多个异步操作需要按顺序执行，并且每个操作依赖于前一个操作的结果时，代码中可能会出现多层嵌套的回调函数，这会导致代码结构变得非常复杂和难以维护。

例如，考虑以下伪代码：

someAsyncOperation(function(result1) {anotherAsyncOperation(result1, function(result2) {yetAnotherAsyncOperation(result2, function(result3) {// ...更多的嵌套...});});
});

在这个例子中，每个异步操作都必须在其完成后调用一个回调函数，而这个回调函数可能又会触发另一个异步操作。这种深度嵌套的结构会导致代码变得难以阅读和调试，尤其是当异步操作的数量增加时。

回调地狱的几个主要问题包括：

可读性差：代码的逻辑流程不易追踪，因为控制流被分割成许多嵌套的块。
难以维护：修改代码或添加新的异步操作可能需要深入到多层嵌套中，这增加了引入错误的风险。
错误处理复杂：在多层嵌套中处理错误通常需要在每个回调中重复错误处理代码，这可能导致代码冗余和潜在的遗漏。

为了解决回调地狱问题，现代JavaScript引入了更好的异步编程模型，如Promises和async/await语法。这些新特性提供了一种更简洁、更线性的方式来处理异步操作，减少了代码的复杂度，同时提高了可读性和可维护性。例如，使用Promises，上面的例子可以重写为：

someAsyncOperation().then(result1 => anotherAsyncOperation(result1)).then(result2 => yetAnotherAsyncOperation(result2)).then(result3 => {// ...处理result3...}).catch(error => {// ...统一处理错误...});

或者使用async/await：

async function doOperations() {try {const result1 = await someAsyncOperation();const result2 = await anotherAsyncOperation(result1);const result3 = await yetAnotherAsyncOperation(result2);// ...处理result3...} catch (error) {// ...统一处理错误...}
}

这些替代方案极大地改善了代码的结构和可读性，使得异步编程变得更加优雅和直观。

二，实战Promise

1，场景说明

假设有这样一个需求，学生登录学校的考试系统，查询某一个的成绩。

实现这个简单的需求，要发出三次请求。

第一次请求，根据用户名查询用户ID，查询成功说明可以登录
第一次请求成功后，发出第二次请求，查询该用户有成绩的科目ID
第二次请求成功后，发出第三次请求，根据科目ID查询成绩

假设后台的数据存储在json文件中，整个请求过程如下。

第一次请求从后台的user.json文件中查询到用户的ID为1。

// user.json：
{"id": 1,"name": "zhangsan","password": "123456"
}

第二次请求从后台的user_corse_1.json中查询到用户有成绩的课程ID为10。

// user_corse_1.json:
{"id": 10,"name": "chinese"
}

第三次请求从后台的corse_score_10.json中查询到用户课程ID成绩为90。

corse_score_10.json:
{"id": 100,"score": 90
}

在这里插入图片描述

2，回调地狱-传统实现

假设我们用JQuery的ajax实现异步请求，代码如下。

html代码完整代码如下，后续的JS演示代码都放在<script>部分。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script></head>
<body><script></script>
</body>
</html>

$.ajax({// 第一次请求url: "mock/user.json",success(data) {console.log("查询用户：", data);$.ajax({// 第二次请求url: `mock/user_corse_${data.id}.json`,success(data) {console.log("查询到课程：", data);$.ajax({// 第三次请求url: `mock/corse_score_${data.id}.json`,success(data) {console.log("查询到分数：", data);},error(error) {console.log("出现异常了：" + error);}});},error(error) {console.log("出现异常了：" + error);}});},error(error) {console.log("出现异常了：" + error);}
});

上面代码仅仅有三次回调，如果回答次数更多，嵌套的更深，导致代码难以阅读和理解，这就是所谓的回调地狱。

3，使用Promise重构

3.1 用Promise实现上述需求

new Promise((resolve, reject)=>{$.ajax({url: "mock/user.json",success(data) {console.log("Promise查询用户：", data);resolve(data.id);},error(error) {console.log("Promise出现异常了：" + error);reject(error);}});}).then(id=>{return new Promise((resolve, reject)=>{$.ajax({url: `mock/user_corse_${id}.json`,success(data) {console.log("Promise查询到课程：", data);resolve(data.id);},error(error) {console.log("Promise出现异常了：" + error);reject(error);}});});}).then(id=>{return new Promise((resolve, reject)=>{$.ajax({url: `mock/corse_score_${id}.json`,success(data) {console.log("Promise查询到分数：", data);resolve(data);},error(error) {console.log("Promise出现异常了：" + error);reject(error);}});});}).then(({score})=>{console.log("Promise查询到分数：", score);})

3.2 进一步重构

下面通过抽取函数、复用代码，对上述代码进行进一步重构，使之更为简洁。

把发送请求的代码抽象为一个公共的方法，减少冗余代码，代码结构更为清晰易懂。

let sendRequest = function (url, params) { return new Promise((resolve, reject) => {$.ajax({url: url,type: "GET",data: params,success(result) {resolve(result);},error(error) {reject(error);}});})
}

于是代码可以重构为：


var sendRequest = function (url, params) {return new Promise((resolve, reject) => {$.ajax({url: url,type: "GET",data: params,success(result) {console.log(result);resolve(result.id);},error(error) {reject(error);}});})}sendRequest("mock/user.json").then(id => {console.log("Promise111查询到id：", id);return sendRequest(`mock/user_corse_${id}.json`);}).then(id => {console.log("Promise1113301查询到id: " + id);return sendRequest(`mock/corse_score_${id}.json`);}).then(({ score }) => {console.log("Promise222查询到分数：", score);})