day02-Promise

王的女人 · 发表于 2023-1-5 23:57:06

Promise

1.Promise基本介绍

Promise是异步编程的一种解决方案，可以解决传统Ajax回调函数嵌套问题。

传统的Ajax异步调用在需要多个操作的时候，会导致多个回调函数嵌套，导致代码不够直观，就是常说的Callback Hell
为了解决上述的问题，Promise对象应运而生，在EMCAScript 2015当中已经成为标准，Promise也是ES6的新特性
Promise是异步编程的一种解决方案
从语法上说，Promise是一个对象，从它可以获取异步操作的消息

2.Promise应用实例

2.1需求分析/图解

需求：演示promise异步请求使用
执行效果：

2.2代码实现

使用json文件模拟数据库表数据

monster.json

{
"id": 1,
"name": "黑山老妖"
}

复制代码

monster_detail_1.json

{
"id": 1,
"address": "黑山洞",
"skill": "翻江倒海",
"age": 500,
"gfid": 2
}

复制代码

monster_gf_2.json

{
"name": "狐狸精",
"age": 100
}

复制代码

2.2.1jquery-ajax实现多次ajax请求

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery-ajax多次请求</title>
</head>
<body>
</body>
</html>

复制代码

使用jquery-ajax的方式容易出现回调函数嵌套(Callback Hell)，如果发出的是多次ajax请求，那么嵌套的层数将会变得非常多，代码不易读。这种写法冗余度高，代码可维护性低。
2.2.2promise对象实现多次ajax请求

首先创建一个Promise对象，在该对象内传入一个箭头函数，箭头函数内进行ajax请求。Promise对象的箭头函数传入了两个方法作为参数(命名随意)，这里的resolve方法是ajax请求成功后调用的函数，reject方法是ajax请求失败后调用的函数。不同于jquery的回调嵌套，在ajax请求成功的success方法中会调用resolve()，并且把第一次ajax请求获得的数据传入该方法。
resolve方法会跳到Promise对象的then()方法，then方法中可以继续使用$.ajax()去进行第二次ajax请求。在then方法中，又创建了一个Promise对象，该对象和之前的Promise对象中的业务逻辑相似，不同的是可以通过上一次的resolve方法，拿到第一次ajax请求返回的数据，然后根据数据进行第二次的ajax请求.......在第二次的ajax请求中，又可以获取第二次ajax请求返回的数据，然后调用这次Promise对象的resolve()，将新的数据传给这次Promise对象的then()方法.....
即，第二次ajax请求的resolve方法又会跳到Promise对象的then()方法........以此类推。
整个过程形成了一个链式的调用。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用promise完成多次ajax请求</title>
</head>
<body>
</body>
</html>

复制代码

2.2.3promise代码重排

虽然在2.2.2中使用promise实现了多次ajax请求，解决了jquery-ajax的嵌套回调问题，但是代码仍然显得臃肿。创建Promise对象和进行ajax请求的代码是重复的，因此可以进行封装，代码重排，增强可读性。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>promise代码重排</title>
</head>
<body>
</body>
</html>

复制代码

3.练习

分别使用Jquery-Ajax和Promise代码重排，完成如下功能，发出3次ajax请求，获取对应的数据，注意体会Promise发出多次Ajax请求的方便之处。

student_100.json

{
"id": 100,
"name": "jack",
"class_id": 10
}

复制代码

class_10.json

{
"id": 10,
"name": "java工程师班级",
"student_num": 30,
"school_id": 9
}

复制代码

school_9.json

{
"id": 9,
"name": "清华大学",
"address": "北京"
}

复制代码

3.1jquery-ajax方式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery-ajax</title>
</head>
<body>
</body>
</html>

复制代码

3.2Promise代码重排

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>promise代码重排</title>
</head>
<body>
</body>
</html>

复制代码

来源:https://www.cnblogs.com/liyuelian/p/17028904.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！

day02-Promise

本帖子中包含更多资源