Promise对象的使用
一、Promise基本介绍
- 传统的Ajax异步请求调用在需要多个操作的时候，会导致多个回调函数嵌套，导致代码不够直观，就是常说的Callback Hell
- 为了解决上述的问题，Promise对象应运而生，在EMCAScript 2015 当中已经成为标准
- Promise是异步编程的一种解决方案
- 从语法上说，Promise是一个对象，从它可以获取异步请求操作的消息
二、注意事项和使用细节
- 如果返回的是Promise对象，可以继续执行.then()
- .then((data)=>{})的data数据是上一次正确执行后resolve(data)返回传入的
- 通过多级.then()可以对异步请求分层次请求，实现代码重排，代码逻辑更加清晰合理
- 通过多级.then()后面的.catch((err)=>{})可捕获发生异常，便于调试
三、Ajax原生请求方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax异步请求</title>
</head>
<script type="text/javascript" src="script/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
$.ajax({
url:"data/monster.json",
success(returnData){
console.log("第一次ajax请求=>",returnData)
// 再次发出ajax请求
$.ajax({
url:`data/monster_id_${returnData.id}.json`,
success(returnData) {
console.log("第二次ajax请求=>",returnData)
// 再次发出ajax请求
$.ajax({
url:`data/monster_gf_${returnData.gfid}.json`,
success(returnData){
console.log("第三次ajax请求=>",returnData)
},
error(error){
console.log("请求失败=>",error)
}
})
},
error(error) {
console.log("请求失败=>",error)
}
})
},
error(error){
console.log("请求失败=>",error)
}
})
</script>
<body>
</body>
</html>
四、Promise实现异步请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>promise请求</title>
</head>
<script type="text/javascript" src="script/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
// 1.使用promise来实现Ajax请求
let promise = new Promise((resolve, reject) => {
//仍然使用Ajax方式进行请求
$.ajax({
url: "data/monster.json",
success(returnData) {
console.log("第一次Ajax请求=>", returnData)
// 成功后调用resolve函数
resolve(returnData);
},
error(error) {
console.log("请求失败=>", error)
}
})
});
promise.then((returnDate) => {
// 为了还能再次进行Ajax请求，需要创建promise对象然后再返回
return new Promise((resolve, reject) => {
//再次使用Ajax请求
$.ajax({
url: `data/monster_id_${returnDate.id}.json`,
success(returnData) {
console.log("第二次请求=>", returnData)
resolve(returnData)
},
error(error) {
console.log("请求失败=>", error)
}
})
});
}).then((returnDate)=>{
// 为了还能再次进行Ajax请求，需要创建promise对象然后再返回
return new Promise((resolve, reject) => {
//再次使用Ajax请求
$.ajax({
url: `data/monster_gf_${returnDate.gfid}.json`,
success(returnData) {
console.log("第三次请求=>", returnData)
resolve(returnData)
},
error(error) {
console.log("请求失败=>", error)
}
})
});
})
</script>
<body>
</body>
</html>
五、Promise代码重排
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>promise代码重排</title>
</head>
<script type="text/javascript" src="script/jquery-3.7.1.min.js"></script>
<script type="text/javascript">
//将所有重复的代码提取出来
// 传入url和data
// url 请求路径
// data 携带的数据
function get(url,data){
// 返回promise对象
return new Promise((resolve,reject)=>{
//使用Ajax请求
$.ajax({
url:url,
data:data,
success(returnData){
// 成功以后以后调用resolve函数
resolve(returnData);
},
error(error){
//失败后调用reject函数
reject(error);
}
})
});
}
// 请求数据
get("data/monster.json").then((returnData)=>{
// 打印信息，然后发出第二次请求
console.log("第一次请求：==>",returnData);
return get(`data/monster_id_${returnData.id}.json`);
}).then((returnData)=>{
// 打印信息，然后发出第三次请求
console.log("第二次请求：==>",returnData);
return get(`data/monster_gf_${returnData.gfid}.json`);
}).then((returnData)=>{
// 打印信息，然后发出第四次请求
console.log("第三次请求：==>",returnData);
}).catch((error)=>{
// 可以捕获异常
console.log("发生的异常是：=>",error);
})
</script>
<body>
</body>
</html>
