promise用于优化异步请求
测试业务需求
1、查询用户,查询成功说明可以登录
2、查询用户成功,查询科目
3、按照科目的查询结果,获取成绩
1、原有的ajax 嵌套调用的代码
$.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);
}
});
发送请求
请求结果
2、Promise可以封装异步操作
使用Promise的代码,使请求顺序性逻辑性更强
let p = new Promise((resolve, reject) => {
//1、异步操作
$.ajax({
url: "mock/user.json",
success: function (data) {
console.log("查询用户成功:", data)
//返回成功数据,并回调then
//请求成功后的操作, 不需要嵌套查询
resolve(data);
},
error: function (err) {
//拒绝,返回失败信息
reject(err);
}
});
});
// p.then 用于执行Promise请求成功后的操作 即 resolve(data) 方法 obj为上一步的结果数据
p.then((obj) => {
return new Promise((resolve, reject) => {
$.ajax({
url: `mock/user_corse_${obj.id}.json`,
success: function (data) {
console.log("查询用户课程成功:", data)
resolve(data);
},
error: function (err) {
reject(err)
}
});
})
})
前面的成功后才执行
.then((data) => {
console.log("上一步的结果", data)
$.ajax({
url: `mock/corse_score_${data.id}.json`,
success: function (data) {
console.log("查询课程得分成功:", data)
},
error: function (err) {
}
});
})
3、优化处理,链式调用, 简洁的写法
用Promise封装一个发送请求的方法, 并且可以链式调用
//该方法 url请求路径, data 请求参数
function get(url, data) {
return new Promise((resolve, reject) => {
$.ajax({
url: url,
data: data,
success: function (data) {
resolve(data);
},
error: function (err) {
reject(err)
}
})
});
}
//第一步, 直接查询用户信息
get("mock/user.json")
.then((data) => {
console.log("用户查询成功~~~:", data)
//第二步, 查询课程
return get(`mock/user_corse_${data.id}.json`);
})
.then((data) => {
console.log("课程查询成功~~~:", data)
//第三步, 查询成绩
return get(`mock/corse_score_${data.id}.json`);
})
.then((data)=>{
console.log("课程成绩查询成功~~~:", data)
})
.catch((err)=>{
console.log("出现异常",err)
});