网站 个人 公司 区别是什么,网上做室内设计好的网站,商城微网站模板,怎么区别网站开发语言文章目录 一#xff0c;回调地狱#xff08;Callback Hell#xff09;二#xff0c;实战Promise1#xff0c;场景说明2#xff0c;回调地狱-传统实现3#xff0c;使用Promise重构3.1 用Promise实现上述需求3.2 进一步重构 在ES6中#xff0c;Promise是一个用于异步编程… 文章目录 一回调地狱Callback Hell二实战Promise1场景说明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 langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript srchttps://cdn.bootcss.com/jquery/3.4.1/jquery.min.js/script/head
bodyscript/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);})
经过重构后的代码明显变得简洁易读的多代码的编写更加符合人脑习惯的流式思考方式。
当然Promise也是对异步回调的封装使用起来确实要简单多了但也增加了理解难度需要对Promise有一定的熟悉度否则也是很难理解的这就要求我们多写多思考。
